Resize event when on scrolling on a mobile?

17th December 2013
I posted this over on the Yetti blog, but thought it would be worth posting here too.

Ever notice a resize event sometimes fires when scrolling on a mobile?

This isn't usually a problem. But occasionally you might be listening to a resize event with javascript.

So why does it happen?
When you scroll on a mobile, the address bar can be hidden or shown, depending which direction you are scrolling.
When the address bar gets show the height of the document reduces, to give room for the address bar. When the address bar is hidden, the height is increased.

By how much?
I suspect this differs from device to device, but on a Nexus 4, the size difference is 48px.

Solutions?
You could make sure when the resize event is fired, the width has changed since last time.