I was aware of multiple scrolling libraries (TouchScroll, iScroll) for the iPhone/iOS due to its inability (???) to support overflow:scroll . However, I was not aware (and I am looking for confirmation) that IFRAMEs don't really work either. It appears that the iframe doesn't respect any attempt to give it a fixed size and always just resizes itself to its content. Am I correct on this? Is the only way to scroll an IFRAME to place it inside a block element with the overflow CSS property set and then to use a lib like the aforementioned?
1) Set the scrolling attribute of the iframe to no (scrolling="no"). This will disable both horizontal and vertical scroll bars. 2) Set the width attribute of the iframe to 200% (width="200%"). This will enable only the horizontal scroll bar.
sandbox attribute for iframes is Fully Supported on Safari 7.1, which means that any user who'd be accessing your page through Safari 7.1 can see it perfectly.
Why Safari doesn't allow to store cookie for iFrame? Answer: A: Answer: A: Try going to Safari/Preferences/Privacy and uncheck Prevent cross-site tracking.
simply adding...
overflow-y:auto;
-webkit-overflow-scrolling:touch;
to a div around my iframe worked for me
You can scroll any content which is set to overflow:auto by touching with two fingers and dragging. Don't put iFrame inside a div with overflow:auto, and instead set the iframe to overflow:auto itself. Unfortunately, iframe scrolling is very choppy, regardless of content or device, so the best solution is to find a way to make your content fit into one long page, with "top" & "bottom" view divs set to follow the viewport (if this is the effect you're going for.)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With