When using the action-sheet interface for an ion-select on Android there is inertial scrolling - a quick flick and you quickly scroll to the bottom of a long list. On iOS however, you can only scroll a few lines at a time making it tedious to scroll to the bottom of long lists.
Am I missing some parameter to enable inertial scrolling?
include this in global.scss
.action-sheet-group {
overflow: auto !important;
}
The newest version of Ionic action-sheet includes a fix for this on iOS, but it's only in Ionic4. https://github.com/ionic-team/ionic/blob/master/core/src/components/action-sheet/action-sheet.scss
To enable inertial scrolling in an Ionic3 action-sheet, you need to add:
-webkit-overflow-scrolling: touch; to the SCSS for the component.
Note: this will get overwritten if you do an npm install and overwrite Ionic src files.
In your project folder, go to:
node_modules/ionic-angular/components/action-sheet
Open action-sheet.scss and either just add that 1 line to .action-sheet-group, or change the entire .action-sheet-group to the following (to match the Ionic4 version):
.action-sheet-group {
flex-shrink: 2;
overscroll-behavior-y: contain;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
pointer-events: all;
background: var(--background);
}
Related
I'm developing an Ionic 3 application. it has some custom styling done, and some images are instantiated via scss as backgrounds.
Thing is, when I run it on local (ionic serve) it works just fine.
But when I build an apk and run it on my phone, images are gone.
I've debugged it, and turns that image files are there, but there's no image on them.
Here's a piece of scss:
&:nth-child(3) {
border-right:none;
padding-top: 28px;
background: url('../../../assets/imgs/tabs/more-tab.png') no-repeat center 4px;
background-size: 20px 20px;
}
When I inspect the app from chrome, I can see the image file on sources tab. But there's no preview for it.
I have been researching a bit, and found only relative/absolute path workarounds (Which none worked). Actually, if I change the image path, it's not even loaded inside the apk.
Any idea why this is happening?
I leverage a background image in the app.scss and below works for me on web/ios/android. I think the relative paths are supposed to be in relation to the the output structure of www/build (not the code directory structure). So maybe try with just 1 ../
background: url("../assets/img/truck.png") no-repeat;
So, turns thatin order to load images both with ionic serve and on a build, image path has to be like this:
../assets/path-to-image
Hope this helps someone else
I want to create a section with a background covering it in a mobile web page, so I was using the following CSS code:
#section1{
background: url("background1.png") auto 749px;
height: 749px;
}
The background is showing correctly on Android (Chrome, Firefox ...), but it is not showing at all on iPhone or iPad (Safari, Chrome iOS ...). I have tried to set these properties using jQuery when the DOM is ready, but no luck. I read that the size might be a problem, but the image is about 700kB (1124x749px) so it should accomplish the Safari Web Content Guide rules. Which is the problem?
My problem was that iOS doesn't support background-attachment: fixed. Removing that line made the image appear.
It looks like there are workarounds for a fixed background image though: How to replicate background-attachment fixed on iOS
There's a problem with your CSS rule:
Your using the shorthand notation in which the background-size-property comes after the background-position-property and it must be separated by a /.
What you're trying to do is to set the position, but it will fail as auto is not a valid value for it.
To get it to work in shorthand notation it has to look like this:
background: url([URL]) 0 0 / auto 749px;
Also note that there's a value called cover, which may be suitable and more flexible here:
background: url([URL]) 0 0 / cover;
The support for background-size in the shorthand notation is also not very broad, as it's supported in Firefox 18+, Chrome 21+, IE9+ and Opera. It is not supported in Safari at all. Regarding this, I would suggest to always use:
background: url("background1.png");
background-size: auto 749px; /* or cover */
Here are a few examples and a demo, to demonstrate that behavior. You'll see that Firefox for example shows every image except the fist one. Safari on the other hand shows only the last.
CSS
section {
width: 200px;
height: 100px;
border: 1px solid grey;
}
#section1 {
background: url(http://placehold.it/350x150) auto 100px;
}
#section2 {
background: url(http://placehold.it/350x150) 0 0 / auto 100px;
}
#section3 {
background: url(http://placehold.it/350x150) 0 0 / cover;
}
#section4 {
background: url(http://placehold.it/350x150) 0 0;
background-size: cover;
}
Demo
Try before buy
Further reading
MDN CSS reference "background"
MDN CSS reference "background-size"
<'background-size'>
See background-size.
This property must be specified after background-position, separated with the '/' character.
I hope this will help someone in despair.
In my case, it was the size of the image that was too big, so the iPad just wasn't loading it (and it was right actually).
Diminishing its size and quality solved the loading issue.
The problem was not solved when I tried to use properly the background in shorthand. It works when I split the background property:
#section1{
background: url("background1.png");
background-size: auto 749px;
height: 749px;
}
Reduce the image size if nothing else works -- iOS doesn't like large image sizes on mobile and simply won't display the image if it's too large.
Great fundamentals by #insertusernamehere! No matter what I did I couldn't get my image to show up...until, I went back to basics. The image size was too large and iPhone didn't like loading an image of that size, over 700kbs. So, I reduced it to 32kb and we were in action.
Background image disappears on the IOS Browser (iPhone/iPad).
This is the code i used:
/*CSS*/
.bg-image {
background: url([URL]) center/cover no-repeat;
}
Alternatively, img src works on all browsers. It adds the Background Images acc to devices resolution.
<div class="download">
<picture>
<source srcset="/images/ios-device-mobile-v2.png" media="(max-width:450px)"/>
<source srcset="/images/ios-device-mobile-v2.png" media="(min-width: 600px)"/>
<img src="/images/ios-device.png" class="imgright">
</picture>
</div>
This piece of code is tested on iPhone Safari, Android Chrome and web Safari. Hopefully, This will help.
background-attachment: fixed; is not supported by IOS.
You can fix this by keeping the image in the div and positioning the div.
Hope this will work.
I had an negative text-indent that was throwing my background image off the page, so color:Transparent it is then.
I didn't see anyone specifically say this, but you have to define the width too. Makes since, since I set the background size to "contain" - it has to know what the container's dimensions are.
Once I did, the background rendered as expected.
#media only screen and (max-width:599px) {
[id=banner] td { width:480px !important; height:223px !important; background:url('image') no-repeat 0 0 !important; }
}
#media only screen and (max-width:479px) {
[id=banner] td { width:320px !important; height:149px !important; background:url('image') no-repeat 0 0 !important; background-size:contain !important; }
}
Note: The background URL needs to be defined for both breakpoints so that it works for iPhone 5 (iOS7).
Add a background-color solved my problem
background-color: #F4F4F2;
I had to set input { opacity: 0; } for my input + span {} icon to show up.
I don't have a real solution/reason for my similar issue but my background-image PNG image simply wouldn't show up until I moved it to a new folder in my (Cordova) iPad app. I literally moved it from /css/images/sweden/myimage.png to /css/images/sv/myimage.png and it started working. The other odd thing is that ALL other images in the original folder work fine (as background-image). Super strange. If I find the true reason/fix I'll report back.
I tried resizing my background image, made it way too small to test the theory, but it still wouldn’t show on any browser on the iPad (and presumably an iPhone). Tried other solutions that are listed here – still no good. Then I noticed that the element had inherited display: table;. Added display: block; to override that and the background image now displays on all divices that I've tested it on.
It's an old issue, i would like to share my solution here. iOS bigger image than the dimension ignores rendering, please use appropriate use size, not the css height/width. The actual image should not be more than 150% larger in size than the rendering viewpoint.
CKEditor 4.0.1 is failing to focus when tapping in the text area on iOS 6.1 Safari. This happens both on the iphone and ipad (both running iOS 6.1). I can eventually get it to focus by tapping it several times. Sometimes it takes 5 taps, sometimes it takes 10 or 15. If I click the bold button, it focuses right away. Any ideas? Is there a way for me to manually capture the tap event and then call something that will focus the editor? I'm using jquery.
Adding height:100%; to HTML and BODY elements in editor-test.css will fix this issue.
Final code will be like this:
html {height:100%;}
body {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 12px;
line-height:1.4em;
color: #333;
height:100%;
}
I know this is an old question, but I ran up against this recently.
In the ckeditor folder I edited the contents.css file. (It styles the contents of the editor)
In the body section, I added:
body
{
/* [other code is left as found] */
/* Add the line below */
min-height: calc( 100% - 40px );
}
This takes into account differing custom heights defined in config.js and the margin: 20px declaration (which seems to be default).
I'm using css fixed position on my mobile website for a top and bottom navigation bar and I noticed a bug on my iPhone browsers (Safari and Chrome) : the position fixed is not working until the end of the first scroll... then it's working fine for all the next scrolls.
Example :
http://jsbin.com/ugaraf/1
Screenshots :
Bug during the first scroll down after refresh : http://goo.gl/yD5iz
Then working fine : http://goo.gl/mUKSn
Do you experience the same thing ? Is there any way to fix that ?
Thanks.
I have a website that has the fixed top and is working fine with safari mobile and chrome.
The css of this specific DIV is
#navbar{
width:100%;
height:80px;
background-color:#FFFFFF;
border-bottom:4px solid #007f3f;
position:fixed;
z-index:10;
}
In my case, the z-index is set due to other divs being in a position:relative.
At least for the top one, you don't really need the top:0
Try without it and post some feedback.
Cheers.
This enables hardware acceleration on iOS devices:
.youraffixelement {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
Here's a strange bug that appears on the iPhone (4S) but not the iPad (3) or any desktop browser. When I load any page from this site, say:
http://www.courtniv.com/what-is-eco-fashion/
on my iPhone, the breadcrumbs ("Home » JustMeans » What is Eco Fashion?") text seems schizophrenic. It rapidly changes sizes, back and forth, about three times a second, from the correct size to a size a few points larger. Sometimes the article text is shaky too, and sometimes from just the second paragraph onward. Sometimes the footer copyright text is unsteady as well.
I tried removing:
<?php get_template_part('includes/scripts'); ?>
from the footer, and at first it appeared to work, but then a few refreshes later the problem had returned. Same story when I removed the font-size declaration from my custom stylesheet. I disabled Javascript on my iPhone and the problem still remained.
Strangely, it doesn't do this every single time I load the page on my iPhone, but most times it does. Often if I change something in the code, it will stop on the next refresh, but then return a few refreshes later. Sometimes if I load the page and wait awhile, doing nothing, the schizophrenia will stop. Sometimes the article text will stop shaking, but the breadcrumbs will continue to shake. Refreshing the page almost always brings it right back. And it definitely continues after the page has finished loading. Right now it's been going for ten minutes. It's continued to wobble after the screen locks, changing orientation, and closing and opening Safari again.
In my 10 years of web designing, I've never seen anything like this. Any clue what's causing this and/or how to fix it? Thanks!
I've never experienced that kind of issue before.
However, here you have two solutions.
Solution #1
Adding the following to the css should prevent the font from resizing.
html {
-webkit-text-size-adjust:none;
}
Since it seems to only be an issue on iPhone it would make sense to target only that terminal with media queries:
#media only screen and (max-device-width: 960px) {
html {
-webkit-text-size-adjust:none;
}
}
Instead of applying this to html you could add it to #breadcrumb, .post-meta and other selectors that has the same resizing issue.
Solution #2
The issue also seems to be related to the following ruleset:
a,
.textwidget a img,
div.category a,
.sociable ul li {
-webkit-transition: all .3s ease;
-khtml-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
changing that into:
#media only screen and (max-device-width: 960px) {
a,
.textwidget a img,
div.category a,
.sociable ul li {
-webkit-transition: none;
transition: none;
}
}
will also solve the issue.
In your case I would have chosen solution #2, since solution #1 shrinks the text size of the targeted elements.