The language pill that sat on the title

The back office is available in twenty-six languages. When somebody opens it in a browser set to a language the venue does not use, a small pill appears at the top of the window offering to switch. It sits in a fixed position, centred, a little below the top edge, and it stays there while you scroll, which is the right behaviour for an offer you can take or dismiss at any time.

A tester reported it from a browser set to Hindi: the pill was sitting on top of the Menu screen’s heading and the line of description under it. We reproduced it in a minute by changing one browser setting. Nobody on our side had ever seen it, because our browsers are set to English and the pill never appears for us. A fault that only shows for people unlike the people who built the thing is the kind that survives longest.

An overlay does not push

A fixed element floats above the page and takes no room in it, so the page draws as if the pill were not there and the pill covers whatever lands beneath. The fix is to tell the page the pill is there. While the offer is showing, the script that draws it sets a style variable to the pill’s height, and every page heading moves down by that amount. When the offer is dismissed or taken, the variable clears and the heading comes back up. The heading is never under the pill because the heading knows about the pill.

The variable is set in one place and read in one place, and a test pins that: the stylesheet reads a variable the script is responsible for writing, so neither side can quietly stop without the other noticing. We checked it in a browser set to Hindi, with the pill above the heading rather than on it, before shipping. The broader rule is one we keep relearning: anything that floats over a page needs the page to make room for it, and the only way to know whether it does is to look at it from where the affected person stands.