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.