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.

  • 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.