Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

overflow:hidden on body is broken in ios6

overflow:hidden on body is broken in ios6

Problem

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!

Problem courtesy of: cmplieger

Solution

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:

Solution courtesy of: Joel Glovier

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

overflow:hidden on body is broken in ios6

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×