DEV Community

Michael Uloth
Michael Uloth

Posted on • Originally published at michaeluloth.com on

The translateZ trick

CSS filters are great

CSS filters are super cool. They can take something that looks like this…

The Firefox logo next to the CSS declaration ‘filter: blur(0)’.

…and make it look like this:

A blurred Firefox logo next to the CSS declaration ‘filter: blur(4px)’.

Love it. Effects like these are the fun part of writing CSS.

And blur() is just one of many fun filter options. The rest are listed here.

CSS filters become especially useful when you need to animate items on and off the page, or in and out of the foreground. For example, you may want to blur an item more and more as it animates off the page. Or when a user opens a modal, you may want to gradually blur the page behind it to direct the user’s attention to the modal content.

Safari woes

Unfortunately, once you start animating the CSS filter property, you’re going to notice your animation is awfully choppy in Safari.

I ran into this issue at work a couple years ago while animating CSS filters. And I recently heard Scott Tolinski lament on Twitter and the Syntax podcast that he was excited about using CSS filters but was forced to abandon them because of this Safari rendering issue.

But there’s a fix! That’s why I’m writing this post, if only to help Scotty. 😎

The fix

To fix the issue in Safari, take this…

.thing {
  filter: blur(4px);
  transition: filter 0.3s ease-in-out;
}
Enter fullscreen mode Exit fullscreen mode

…and change it to this:

.thing {
  filter: blur(4px);
  transition: filter 0.3s ease-in-out;
  transform: translateZ(0); /* the fix */
}
Enter fullscreen mode Exit fullscreen mode

That’s it. Your animations will run smoothly in Safari now.

How does translateZ help?

The basic reason translateZ(ANY_VALUE) makes the animations run smoothly is that it tells Safari to render the animation using the GPU instead of the CPU.

Without translateZ (or a similar hint), Safari will try to animate your filter using the CPU, which isn’t nearly as able to render complicated graphics. For graphics-intensive tasks like animating a filter effect, the GPU will always do a much better job.

Help us out, Safari

Chrome and other non-Safari browsers automatically hardware-accelerate animations like this by engaging the GPU, but Safari still requires you to add specific properties like translateZ to get the same result.

Hopefully the Safari team will fix that soon so Scott can animate all the cool CSS features he likes without resorting workarounds like this one.

Until then, translateZ is your friend.

Related Links

Top comments (0)