iOS safari resizing issues

Just a quick heads up about a peculiar little problem I encountered today.

Like all the ‘cool kids’ I try and make all new sites I develop responsive. That includes the Headscape website, which I am currently redesigning.

I had to use jquery once or twice to detect resizing in the browser and tweak accordingly. Yes, I know this isn’t ideal, but it was the only way of doing what I wanted. It also works perfectly fine without the Javascript, so get off my back ;-)

Here is the interesting problem. iOS safari seems to randomly trigger resize events when the page first loads.

The only way you can stop it doing this is to fix the height of your HTML and Body tags:

height: 100%; overflow: auto; margin: 0;

The problem you will have is that this kills the nice inertia scrolling you get on touch devices. To re-enable this add the following line of code to HTML and Body:

-webkit-overflow-scrolling: touch;

I spent half the day fighting with this little problem so I thought it was worth posting the solution for others.

Related Post

Responsive components using context queries Media queries make a website respond to the viewport. But what if we could make site components respond to their container?
How should we handle responsive images? What's the best technique for hiding large images on mobile versions of websites? Conditional loading of images with js?
Are Media Queries the answer to the Fold? The fold is still one of the hottest topics on the web. Clients are concerned users will miss key content and web designers denying the fold exists. Could responsive design hold the answer to this debate?
  • Thanks for the tip! This is why it’s crucial to test your eCommerce site in a variety of web browsers. As we tell all our merchants, customer experience is key to online growth.

  • NeilCarpenter

    Wish I had known this fix 2 months ago – experienced the same problem and in the end used JS to confirm resize before firing events, far from ideal. Also, I don’t think it’s just when page first loads, I was detecting sporadic resize events when pages were being viewed, not just on load…

  • Well, this is getting added to both responsive sites I’m working on right away this morning. Thank you!

  • NewPendant

    It helped me to resolve my problem. Thank you for sharing it with us

  • MozzyMoz

    -webkit-overflow-scrolling: touch;

    This made my problem actually even worse and resize events are triggered more often when I scroll around. Any ideas?

  • Tim

    Thanks so much! You saved me from having to redo a rather involved dropdown nav which previously collapsed on scrolling in webkit. Perfect workaround.

  • Jon

    There’s a very simple solution from dlemstra on Stack Overflow – measure the window width and include a check to see if it’s changed in your onresize event handlers.