Mobile browsers don't fire up resize event when hiding address bar

Question

I have two sections on my website, whose height I set to window.innerHeight. When the resize event is fired the height is updated.

This works perfectly on my desktop, but on my android phone I get some problems.

In Chrome for android, if you scroll down so that the address bar gets hidden and the window size changes, Chrome fires a resize event and the height is updated.

Firefox and the default android browser don't fire this resize event after hiding the address bar. If I change the orientation of the device manually from portrait to landscape and back the height is updated like it should.

So I tried to dispatch an orientationchange event myself, but this didn't work.

Is there a way I can get Firefox and the default browser to behave like Chrome?

Here is the website.

Answer 1

Indeed mobile browsers (tested Android/Chrome iOs/Safari), when toggling address bar, fire the resize event only after user takes finger off the screen.

However we can use the touchmove event, that made the browser hide or show the address bar in the first place. In the handler we can use window.innerHeight property to detect changes in the viewport height. Using jQuery:

$(window).on('resize touchmove', function () {
    // adjust heights basing on window.innerHeight
    // $(window).height() will not return correct value before resizing is done
});

It's not perfect, but nevertheless it is the only working solution I came up with.

The whole behavior is kinda quirky, because even elements styled using position: fixed will be redrawn only after the touch ends.

Additionally if the adjustment function causes lag, the handler should probably be debounced.