The translateZ trick
Tags: css, safari
Published: 2022-09-01 17:03:02

---
title: The translateZ trick
description: How to smoothly animate CSS filters in Safari by engaging the GPU.
published: true
date: 2022-09-01 00:00:00 UTC
tags: css, safari
canonical_url: https://michaeluloth.com/css-translate-z/
---

## 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)’.](https://res.cloudinary.com/ooloth/image/upload/v1662044963/mu/css-filter-blur-0.png)

…and make it look like this:

![A blurred Firefox logo next to the CSS declaration ‘filter: blur(4px)’.](https://res.cloudinary.com/ooloth/image/upload/v1662044970/mu/css-filter-blur-4px.png)

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](https://developer.mozilla.org/en-US/docs/Web/CSS/filter). 

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](https://twitter.com/stolinski/status/1532745802174578691) 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…

```css
.thing {
  filter: blur(4px);
  transition: filter 0.3s ease-in-out;
}
```

…and change it to this:

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

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

- [translateZ](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ) | MDN Web Docs
- [CSS filter](https://www.notion.so/The-filter-Boolean-trick-889b30c18eed4d71ba7d439fb4eb8f61) | MDN Web Docs
- [CSS Filter Effects landing in WebKit](https://developer.chrome.com/blog/css-filter-effects-landing-in-webkit/#support) — mentions need for `translateZ` back in 2011 | Chrome Developers
- [Increase Your Site’s Performance with Hardware-Accelerated CSS](https://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css) | Treehouse
- [Improving HTML5 App Performance with GPU Accelerated CSS Transitions](https://www.notion.so/The-filter-Boolean-trick-889b30c18eed4d71ba7d439fb4eb8f61) | Urban Insight ********
- [CSS GPU Animation: Doing It Right](https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/) | Smashing Magazine
- [Web Performance Fundamentals](https://developer.mozilla.org/en-US/docs/Web/Performance/Fundamentals#specific_coding_tips_for_application_performance) — calls out that `translateZ` is still needed to get hardware accelerated CSS animations on some platforms | MDN Web Docs
- [Andy Ngo tweet](https://twitter.com/andyngo/status/1263056084719202304?s=20) — suggests `translate3d` version of same trick | Twitter