cmplieger cmplieger - 1 year ago 221
CSS Question

overflow:hidden on body is broken in ios6

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

When adding

on the
tag and moving an element out of the body using
It creates an extra scrollable space for that element.
On all desktop browsers it is "hidden".

Here is a demo: . 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 Source

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)

enter image description here

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">

enter image description here

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download