Found out 90% of websites break on mobile because of one CSS property

I was digging through a report from the HTTP Archive last night and saw that 90% of sites with mobile layout bugs had the same problem - they forgot to set 'overflow-x: hidden' on the body. It makes text and nav bars spill off the screen sideways like crazy. Has anyone else noticed this one tiny fix solving most of their responsive headaches?

2 comments

2 Comments

rayc833d ago

Yo that's wild, I never thought it'd be that specific but now it makes total sense. I've def seen sites on my phone where the whole header just slides off to the right and you gotta zoom out to see it. One thing I've noticed though is that overflow-x hidden can mess up sticky headers and fixed nav bars if you don't set it right on the parent container too. Like on my own site I had a sticky nav on desktop but on mobile it just disappeared behind the content. Took me hours to figure out it was the overflow property hiding it. It's a lifesaver for basics but you gotta test it with any fixed elements or modals first or you'll be chasing ghost layouts.

thomas_johnson353d ago

Man that sticky nav thing you mentioned is brutal. I've seen the same exact issue where overflow-x hidden basically cuts off anything with position fixed because the browser treats it like it's outside the container. It's like the overflow property overrides the fixed positioning logic or something. On one project I had a modal with a dark overlay and the overflow hidden on the body was just swallowing the whole thing, made the close button unclickable. The fix is usually putting the overflow on the html element instead of the body, or wrapping everything in a div and controlling it there. But then you gotta test on like five different phones because Safari handles it completely different than Chrome. Honestly overflow hidden is one of those properties that seems simple but has so many weird edge cases with z-index and stacking contexts too.