Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Sunil Thammineni Mahendra Chinna
Sunil Thammineni Mahendra Chinna
2,274 Points
Posted by Sunil Thammineni Mahendra Chinna
Sunil Thammineni Mahendra Chinna
2,274 Points

Overflow: hidden not working in iOS safari.

I have a home page where there will be a popup modal that comes up on the page, and at lower viewports the content on the pop up will have overflow:auto, but at any viewport and device, the background page ( home page) should not be scrollable when the pop up is open, I have added overflow: hidden to the body when there is overlay open, overflow : hidden is working in all devices and browsers except in ipad/iphone safari versions. Researched a lot about this issue, but not able to find the correct solution.

can someone please help me ?

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I don't know how accurate it is, but it might be something to try. I found on stack overflow a post that specifically says that iOS safari ignores overflow hidden when applied to body or html. They seem to be able to have worked around this by putting everything inside a wrapper div. Might give it a shot. Here's the reference. http://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers

Sunil Thammineni Mahendra Chinna
Sunil Thammineni Mahendra Chinna
2,274 Points
Sunil Thammineni Mahendra Chinna
Sunil Thammineni Mahendra Chinna
2,274 Points

Thanks for the reply! I have already looked into that post, but that did not work out.

Sunil Thammineni Mahendra Chinna
Sunil Thammineni Mahendra Chinna
2,274 Points
Sunil Thammineni Mahendra Chinna
Sunil Thammineni Mahendra Chinna
2,274 Points

Well, I have tried a bunch of solutions but in vain, overflow: hidden with position: fixed is doing the job, but position: fixed will distort all the elements on the homepage. I saw few articles suggesting position: relative with overflow: hidden, but that doesn't work.

Still looking for a fix! is there any alternate for overflow:hidden ?

Corey Huddleston
Corey Huddleston
13,273 Points
Corey Huddleston
Corey Huddleston
13,273 Points

As mentioned by Jennifer, Safari overlooks "overflow: hidden" when applied to HTML and BODY in CSS. You should target the element selector more directly in CSS, specifically the one that has the content that is overflowing, and use "overflow: hidden" on that element. In my testing Safari does not overlook that, and it fixed my issue.