Chrome on Android may resize the window when you least expect it.

What are we talking about?

In Chrome on Android, the location bar is hidden automatically in some cases, to increase the useful screen area.

The page needs to be long enough to make it scroll, and not just a bit, but more than a certain amount (How many pixels exactly?  I don't know.)

That's all well and good.

And if you use https and a self-signed or otherwise invalid certificate, Chrome will never hide the bar.

Which is very good too, for security reasons.  Make people see they are in a potentially dodgy website!

What is the problem then?

That it is very common to use self-signed certificates during development and/or testing, and use a proper certificate in production.

Now your production and testing environments are different.  Uh-oh.

Some things that may go in an unexpected way:

• Did you measure the size of the window and use it in some media query? The actual size may change.
• Do you react to resize events for anything? Like, trying to detect screen orientation change?  Did you take into consideration that there may be resize events unrelated to orientation changes?

Let's have a look at it

I have a couple of test pages here, go open them in your phone:

• An example of a page where the location bar will auto-hide: https://goo.gl/oKePww which redirects to https://rawgit.com/MrP/blog/master/chrome-android-resize/index.html
• Then, an example of a broken certificate site: https://pcwebshop.co.uk/

That last one may or may not be a real shop with the wrong certificate.  I found it here: https://onlinessl.netlock.hu/en/test-center/self-signed-ssl-certificate.html 

It works for our purposes for now...

In the first test page you'll see the background color flash red whenever there's a resize event.

In the first test page, scroll down and you should see the location bar (and the tab bar too, when in a tablet) retreat to the top of the screen.  Then you'll see the screen flash red, showing that a resize event was fired.

Open the second link, though, and no matter how much you scroll up and down the location bar never goes away.

So what do we do?

Not much you can do, except being aware of it and code your site properly.  This is the browser behaving as it should.

Does it work for your device? It doesn't? Any feedback is appreciated.