I finally got my personal blog online, ”yay!”
But it looks like the first thing I’ll be using the darned thing for is to gripe. Now don’t worry I’m not planning to make a habit out of it. And I’ll even suggest a solution.

If you’re reading this, chances are you scrolled down from the top of this page and noticed it’s header disappearing behind the content. If you didn’t, I would welcome a bug report which will subsequently give me a mini heart-attack and prompt me to respond with one of these. Now, on with the matter at hand.

Sadly, the recent versions of Safari suffer from a bit of overzealous optimisation which causes some repainting issues with fixed element. As a result the content ends up behind the header when scrolling instead of the other way round. So what’s the deal with that?

With the workload of browsers expanding from simple content readers to being able to run full-fledged applications, performance becomes an issue. Hence browser vendors built in quite a bit of optimisation for rendering a page. Opacity for example can be offloaded on the graphics card and won’t require the browser to repaint the element. Manipulating the position is better done by means of CSS’s “Translate” property rather than using “Position”. All this to save a few precious cpu cycles which results in a smoother frame rate. Yes, browsers, just like video games and movies, have a frame rate. This video by Paul Irish is definitely worth a look if you want to find out more.

It is one of these optimisations that wrongfully decides that our fixed element shouldn't be repainted when scrolling the page, causing the content to disappear underneath it. I first noticed this when reviewing the blog in Mobile Safari on the iOS 7 developer preview, although here the element was repainted as soon as scrolling on the device stopped. I couldn’t find a fix right away and figured it wasn’t worth spending my time on since this would probably be fixed in the next build anyway. It wasn’t. What's more, when I installed the OS X Mavericks GM this weekend, it turned out this “optimisation” made it’s way into Safari 7 as well.

Luckily there is some CSS magic we can wield to remedy the situation. Applying -webkit-transform: translate3d(0, 0, 0); on the vanishing element, should keep it from doing that. Unfortunately, in my case this messes up the affixed navigation, meaning I’ll have to dedicate some more of my free time to tinkering with this page to get it just right.