css - overflow:hidden on body is broken in ios6

Question

I have done some testing and from what I can see there is a bug in mobile Safari on ios6.

When adding overflow:hidden on the body tag and moving an element out of the body using transform:translateX(100%); It creates an extra scrollable space for that element. On all desktop browsers it is "hidden".

Here is a demo: http://jsfiddle.net/mUB5d/1 . Open that in Mobile safari and you will see what is wrong.

Could anyone take a look at safari 6 on Mac OS to see if the bug is present there too? Does anybody know of any workaround besides creating another parent around my element?

Thanks for your feedback!

Answer 1

Nope. Safari 6 on Mac does not present with the bug. Scrollbars are not present.

I ran it on OSX Mountain Lion (10.8.2)

To further answer your question, the reason this is happening probably has more to do with Mobile Safari's zoom rendering than an overflow hidden bug. The element is in fact being hidden off screen (notice below where I have scrolled over to the right all the way, it still doesn't show me the full 100% width element - 90% of it is in fact being hidden.

It likely has something to do with iframes, and page zoom. Still looks like a bug though.

I'm assuming you're demonstrating in JSFiddle from a real life example. If you go back to your real life example (apart from iframe territory), try adding this meta tag to the head if you don't already have it, and see it this helps:

<meta name="viewport" content="width=device-width, initial-scale=1">