I have a div that is supposed to move off the screen when a side navigation is open. This is accomplished by using "margin-left:240px; overflow:auto;". This is working great on my iPad4. But on my iphone5 the div does not go off the screen, instead the contents of the div simply get squished and is visible.
I know overflow has had some issues in the past with iphones/ipads, but not sure why this is working for me on an ipad and not an iphone.
Anyone have any suggestions?
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.
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 am making a web app for the Android and iPhone that has a div for content. I can update the div programmatically and have it scroll down but I can't scroll using just my finger.
You can see it here: http://crosswordcoach.appspot.com/poc
Type in "Cookie firs" and then select that clue (obviously there are other bugs to work out!) and it will have enough hints to fill the screen. With Chrome on a PC it works correctly and the list becomes scrollable if it is too big for the screen. On the iPhone and Android it does not.
Does anyone know what the deal is? Thanks!
iPhones cannot scroll absolute positioned divs by default, I believe.
iScroll might help.
I have a web app that wraps the main site content in an Iframe to enable some elements that are persistent across the site (only way to do what I'm after as far as I can tell).
It works fine on most browsers, but there is a scrolling problem on the Iphone: The content displays, but trying to scroll does a drag and drop operation instead.
Is there any way to tell the Iphone browser to use normal scrolling in that specific Iframe?
Example site: http://carlocapocasa.com
Thanks a ton and a half,
Carlo
Use two fingers to scroll up and down.
I also had problems getting an iframe to scroll on iOS devices. My iframe was inside a DIV, which had it's overflow set to hidden.
My solution was to set the overflow of the containing DIV to visible.
I am coding a website for iphone.
Some of the content (images and strings I have no control over) is too wide to fit in the 320px viewport. When I first encountered this, it caused the entire page to revert to web page view (scaled small text).
So, I put the wide images in a div with CSS style="width:320px; overflow:scroll;" This stopped the page scaling but I assumed I would be ale to scroll that div horizontally to see the rest of the images (like the app store does with screen snaps). However, the scrolling just doesn't work on the ipod. (It does work on Safari in default Mac mode but not in Safari as iPhone User Agent.)
Anyway, how can I get the sideways scrolling on the ipod?
http://cubiq.org/scrolling-div-for-mobile-webkit-turns-3/16
Scroll with 2 fingers?