Recolouring the Safari toolbar

07 Nov 2015

When you scroll up in Safari 9, the page contents show through the toolbar. This is similar to the “blurred glass” effects found elsewhere in OS X.

I’m not sure how I feel about it: it can cause distracting flickering as you read.

Just for fun, I tried to abuse this “feature” in order to recolor the toolbar deliberately. And so I discovered the following trick:

.toolbar-overlay {
  position: fixed;
  bottom: 99.99999%;
  height: 500px;
  left: 0;
  right: 0;
  z-index: 100;
  background: blue;

I’m positioning a big coloured rectangle just off the top of the viewport. This effect is to recolour the window toolbar, regardless of the contents of the page beneath.

It eliminates the flickering effect caused by black text on a white background.

Neat, eh?