iOS safari resizing issues | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Monday, 16th July, 2012

iOS safari resizing issues

Development Mobile:
The estimated time to read this article is less than a minute

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.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.