I have a webpage with two side by side overflowing divs that split the screen, similar to gmail the iPad. This works fine on desktop versions of WebKit, but is basically broken on iPhone / iPad because scrolling requires two fingers and lacks any momentum.
What is the best way to implement two scrolling areas for the iPad, similar to gmail, the maintain the standard iOS scrolling behavior?
You might consider using SproutCore Touch.
Related
My webpage at www.rlhismgraphicsltd.net moves around on iPhone and iPad. I've made it responsive and it doesn't move around on desktop but does on iPhone and iPad. The container I made is 100% width and max-width so it's supposed to stay contained within the viewports parameters. The page wanders and scrolls horizontally on iPhone and iPad. I used overflow:hidden and it does not prevent the page from wandering left and right on iPhone and iPad. If anyone has an iPhone or iPad you can check it out. I've opened the page on an android phone and it does not wander. I've inspected the page on Chrome and it doesn't move around like it does when I look at it on my iPhone and iPad. I can not figure out what the problem is.
I thought maybe padding and margins may be an issue but I can't really tell what may work because it is fine when I inspect the page on chrome. Once I look at it on my iPhone and iPad i get horizontal scrolling and it moves diagonally and doesn't stay within the viewports parameters.
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.
To mobile optimize a website, I have created a div with 'auto' overflow (CSS), so that the size of the div doesn't increase when the content does.
For some iPhones, and iPod Touches, the only way to scroll such a div is with two fingers. I have tried an iPod of a friend on 4.2, he has to use two fingers. My own iPod (iOS 5.0.1), only needs one finger.
How to detect if the user has to scroll with two fingers, or with one? (If it's just a firmware issue, could you please tell me from which firmware you only need one finger, and whether this is iPhone, iPod or both?)
iOS 5 provides 1 finger scrolling when an element has the following CSS property:
-webkit-overflow-scrolling:touch;
iOS 4 can use 2 finger scrolling (which is near worthless since users don't know that they have this option) on elements that have, I believe, a set height and overflow: scroll.
In July I built an iPhone web-app using jQTouch. On iOS 4 I had no problems with the web-app: The built-in jQTouch animations (slide left, slide right) etc were smooth as silk.
However, since the upgrade to iOS 5, these core page transition animations (slide left, slide right and flip) have become very jerky.
The web app can be found here (please add it to your home screen on your iOS 5 iPhone):
To see the effect, once it's added to your home screen, start the app and keep tapping the main buttons - Speed, Distance or Time.
I've done a lot of Googling and have found nothing, though I'm sure that other developers must have been / will be affected by this issue.
The issue is not just limited to my 3GS device as I have tried it on other people's devices (including iPhone 4) and I see the same issue, but only on iOS 5.
Stuff I have tried:
updating my jquery.js to different versions - including the latest - animations still jerky
updating jQTouch to the latest version - animations still jerky
stripping out all JavaScript, only leaving jQTouch and its initialization - animations still jerky
removing all of my custom css, only leaving the default jQTouch CSS - animations still jerky
removing all CSS, apart from just the CSS3 animations in jqtouch.css - animations still jerky
removing html elements - i noticed that when i removed all of the select and input elements from the web app, the animations became smooth again. However, there is nothing strange about the mark-up or CSS attached to these elements. Could this issue simply be to do with having too many elements on the page at once during an animation?
So it seems this issue is to do with HTML elements rather than JS or CSS, although I really can't figure out why...the mark-up is all valid apart from the iphone specific attributes i've used such as placeholder and autocapitalize etc.
Strange thing is that the animations on the jQTouch demo still seem smooth on iOS 5.
Any help/suggestions much appreciated.
Thanks!
Edit: Also, the button on the 'Info' page that 'bounces' has become jerky too. This uses the jQuery UI bounce effect. This was animation completely smooth on iOS 4.
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.