Last week, I built a small floating subscription button for The 19th. It’s pretty simple, and the design had been floating around since long before I got there:

The button only displays on mobile browsers. There were a few nuances to getting it working in mobile Safari in particular.

My first attempt, where the button’s position was based on browser height percentage, had the button jumping around the page when the URL bar appeared and disappeared. Distracting and gross!

It turns out that Safari alters the height of the page when you refer to it in percentage terms, but doesn’t alter the height of the viewport. So as soon as I specified the height using vh increments, the problem went away.

Then I was left with a new problem. Although the button was happily static, it was partially obscured by the URL bar (by design) until the bar went away. That’s fine - but it was taking a long time to repaint, so you’d see half a button for a couple of seconds before the browser caught up.

The solution to this is to apply a CSS transformation that does nothing visible at all:

transform: translateZ(0);

The effect of this hack is to tell the browser to use hardware acceleration for this layer. With this in place, it takes no time at all to repaint, and my weird visual glitch was gone.

The code for the button took less than a day, but as always in web development, there are nuances to look out for. (I won’t get into tracking Google Analytics event clicks on a fully SVG button, which is also harder than it should be.)

The result should be more mobile clickthroughs to subscribe to the daily newsletter, giving more people the opportunity to connect to our community. It’s the kind of small feature that can have an outsize impact - and, hopefully, make the audience team happy. Which, in turn, makes me happy too.

By the way, we’re hiring! Our web applications engineer position is open for applications.