While testing my website's mobile version on several devices, I noticed a very strange behaviour.
I have a scrollable content div with overflow: auto, and this works properly on all tested devices, except iPhone 4 on Safari. Other browsers and devices display it correctly, even iPhone 5 Safari.
On iPhone 4 Safari, when you scroll to the end of the content, a lot of extra whitespace appears at the bottom (looks like 100-200% extra height) and the text disappears when scrolling. This doesn't happen on any other devices in Safari, nor does it happen in other browsers on iPhone 4.
Has anyone ever heard of such a phenomenon before? I have absolutely no clue what causes this behaviour or how to fix it.
Since I only have access to a limited amount of devices for testing, I may be overlooking other devices/browsers where this issue also occurs. If you have a mobile device and want to test it as well, the live site is here: Live site. On the mobile homepage, click one of the logo's to expand the content, then try scrolling down. Please post your results in a comment.
How it looks on iPhone 5 Safari when scrolled down (no issue): Image
How it looks on iPhone 4 Safari when scrolled down (issue): Image
I would venture to guess that you are exposing a layout quirk in Mobile Safari because of the way that you are hiding/showing the contents of each .company element. Each time that you change the display property of an element, the browser must perform a reflow. Reflows (also called layouts) are prohibitively expense on lower powered mobile devices. This would likely explain why you are only seeing the issue on an iPhone 4.
I myself tested on an iPhone 4 and iPhone 3GS, both running iOS 6.1.3, and I was able to reproduce the issue only when I expanded the top or bottom .company elements, but not the middle one. Perhaps this is because the middle .company element contains the fewer children, meaning fewer layout calculations are needed.
Instead of applying display: block; and display: none; to each of the children in the .company element, I would strongly recommend you simplify your javascript to instead toggle the display property on a single container element. By doing this, you force the browser to perform a reflow calculation only once, rather than for each element that you are individually changing the display property.
P.S.: The "other" browsers on an iPhone (i.e. Chrome and Opera) use UIWebviews. UIWebviews use a modified version of the Nitro Javascript engine (the Safari version has JIT compilation enabled). This subtle difference might explain why the issue can only be reproduced in Safari.
After playing around with your live site a bit using the Safari 6 remote debugging feature, I found a solutions that is working for me.
Add -webkit-overflow-scrolling: touch; to the .container element (the one that is the child of your #companies element).
After thinking about it some more, I remembered having issues with scrolling making content disappear randomly and adjusting the overflow-scrolling property fixed it for me.
Related
I've run into a problem with Bootstrap's .top-nav only on Safari for iPhone. When scrolling through a .dropdown-menu, after releasing my finger from the phone, it seems to "keep" or "catch" the location my finger was and hover over that list-item, keeping the CSS style for that element's :hover. It doesn't attempt to direct the url anywhere, but it can be a little confusing to the end-user.
This does not happen on my Android phone or in the desktop browser at extra small width (no-touch).
I understand this could be a difficult question to answer, but I'm hoping somebody else has run into this problem on their own and knows the root cause / a fix.
Bootstrap 3, latest version of Safari for iPhone 5. Thank you!
edit: oh, also, this is Bootstrap integrated into Adobe Business Catalyst. I don't think that should make a difference, but it might be worth saying.
When having a look at this site
this:
linebreaks correctly for small screens. It word wraps (adds a line break) for iphone 5c and ipad in landscape mode as well. Which is wrong. The sentence could finish in one line.
The font size seems bigger as well.
The word wrap / linebreak does not happen on my HTC One S in landscape mode.
Is there a tool that can help me figure out these irregularities?
Any idea what this problem is about?
Note: this gets used:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
EDIT I applied a fix on the website, so now I heard it looks fine. The answers given fix the problem (when applying 100% instead of none)
Apple devices (I might think also Chrome on Android devices do this as well) have a really funny way to render text on pages, the font increases in size automatically to retain the same "flow" in both portrait and landscape since it helps the user to do not lose track of the line it's currently reading.
The way to disable entirely the resizing is to use the following CSS rule:
html {
-webkit-text-size-adjust: none;
}
However this behaviour works only on mobile pages which are zoom fixed with the meta tag user-scalable=no and it breaks some desktop browsers while the desktop zooming
What you probably want is to keep the font-size constant through every zoom scale. If you add the following on your CSS, then you'll have what you're looking for.
html {
-webkit-text-size-adjust: 100%;
}
‑webkit‑text‑size‑adjust: 100%
Is the way to do it instead of
‑webkit‑text‑size‑adjust: none
Using none will break user zooming in various browsers.
Here's a good read about the topic: http://blog.55minutes.com/2012/04/iphone-text-resizing/
To build responsive and cross-device websites you can use online tools such as this emulator
However, in text case formatting and layout, a real emulator is needed.
X code can launch IOS sumulator and will give you a way to debug your local/remote website on any apple devices (smartphone and tablets).
By using this software, you will be able to understand/debug and correct your website.
Currently, all browser are more or less managing differently the rotating actions (lanscape<->portrait) and also fonts. So, I won't look exactly the same but your website will be very similar across all browsers.
In your case, first you need to stop all browsers to resize your text on rotation.
Simply add the following CSS code.
CSS
html, p, a {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
By the way, I checked your line break issue. Every thing is working on Iphone 4/5 on Ios 6X and Ios 7X.
But any way, you need in the future to check your website on IOS simulator
Here is a screenshot from safari for an Iphone 5:
Our current app doesn't work on the ipad 3 with retina display running ios7 beta 6.
The html page served between the is too big on the ipad, ie. ignores 100% width - therefore the user needs to scrolls around the page to see all the buttons and functionality rather than it fitting on one page.
This doesn't happen on the iphone 4 running ios7 (other models not checked) and it doesn't matter whether or not x2 is selected for the ipad zoom.
Has any one come across this issue, is this a media query fix or a iOs7 bug?
Just updating my answer based on what we've found last week and implemented for our app as a solution.
Although not entirely clear I believe the Question in hand above has to do with an HTML application running in webview vs. a web application in safari. Because 2x compatibility mode is being referenced in the question.
Issue:
Is not due to media Query but the viewport width=device-width is returning 768 instead of the 320 it returned in <= iOS6.x, when running an iPhone application in 'Compatibility Mode' on an iPad.
Fixing on the remote page
The best solution is to edit the viewport on the remote page by modifying the value of the 'width' attribute or removing it all together.
Fixing natively:
Few options...
1) Build the app as 'Universal'
2) I found somewhat passable results by executing javascript on webViewDidFinishLoad to decrease the scale
self.webView stringByEvaluatingJavaScriptFromString:#"$('meta[name=viewport]').attr('content','width=device-width, initial-scale=.41 user-scalable=no');"];
If you happen to be using PhoneGap/Cordova, issue was also identified and filed here: https://issues.apache.org/jira/browse/CB-4323
This should help:
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
iOS7 has been said to be the buggiest Safari version since 1.0.
There is no way to have a truly fullscreen experience on your website with iOS7. This was one of the wonderful aspects of iOS 6, and losing it is a major step backwards.
I hope that Apple comes to it's senses...
What causes the flash of white to the right of a responsive design when changing orientation from portrait to landscape on the iPhone with iOS 6?
Try it on Safari for iOS 6:
Websites like this don't do it: http://html5boilerplate.com
But this one does: http://www.initializr.com
Something to do with re-processing (CPU lag) to fit a wider screen?
It doesn't happen in Chrome for iOS6...
For example, I just removed all img from my own testing site and set the background of <body>, <html> etc. to non-white, but it still happens. This seems to happen with a lot of different websites out there, but others are completely immune to it...
Could it be a problem with someone on the website, or an iOS Safari bug?
Thats because of the elements in the header of http://www.initializr.com/ which (dis)appear when changing orientation. It forces the header to resize and the elements below are pushed down. This causes a repaint of the DOM, that causes the short white flash on iOs.
I've noticed css sprites seem to show 1 more pixel than they should when viewing them on the iphone. My site works perfectly fine on all major desktop browsers on mac and PC. But when I view it on the iphone you can see 1 pixel of the adjacent sprite image.
Anyone encounter this before? Any suggestions on how to cleanly fix this? I know I could just modify all my sprites to have more separation in between them, but is there an easier way?
UPDATE: Tested zooming with safari, and noticed the exact same problem occurs at certain zoom levels on desktop safari
Better late than never:
It's not a bug or a software flaw, it's simple mathematics: the (older) iPhone displays websites at 980px width on a screen that is 320px wide (in portrait mode).
So it's a rounding issue: let's say an element is 50px wide. It is displayed at roughly a third of its size, and that is causing the problem: the iPhone will display it at either 16px or 17px width. Even if it was exactly one third, the problem would remain, and the same applies to various zoom levels, of course.
If it's 16px, you're fine - you have probably noticed that the issue doesn't occur on all your elements. If it's 17px, it means that the element is displayed slightly larger than intended, and the adjacent sprite will show.
I checked apple.om on an iPhone 3G, and even their navigation bar shows some odd little artifacts at the bottom - they're just barely noticeable.
So in theory, it should be enough to add 1px around each sprite. Having to change all these elements is a bummer, but it seems to be the best solution. The problem isn't likely to go away either - the iPhone 4 obviously still scales things down, at least in portrait mode. Not to mention all the other smartphones out there with far inferior screens.
Add another 1px of space between the icons.
.:edit:.
Just noticed that this was one of your proposed solutions. Check the elements with the sprite and make sure that they are the right size. (Double check the rendered border-box model in Firebug).
It could have something to do with how the mobile phone renders items.