It’s amazing how many features are continuing to make their way natively into the browser. HTML5 has made available native audio & video, canvas, offline storage, geolocation, web workers, and more. CSS3 has made designers lives a little easier with built-in ways to handle basic effects like gradients, rounded corners, and box-shadows, not to mention options for animations, transitions, and 3D transforms.

Some of these options in CSS now allow the browser to do things that once only happened in graphic programs like Photoshop. Filters and blend modes, for instance, make so many things possible. But unfortunately, as with many things, there may also be a cost to pay.

Potential Problems

I found this out first hand, recently. The page I was working on had some basic animations being done in conjunction with the use of a filter on some images on the page. On desktop browsers the performance was fine. But on mobile devices, it was a different story. The filter was taking up so much processing power that the animations couldn’t be done without noticeable jank.

So although the filter provided a nice design touch, it was also posing a performance cost, something that we should all keep in mind. Since The filters can be fairy processing intensive, if there’s anything else that’s going on in the page, it’s possible that these filters can lead to jank – especially when they are being used on mobile devices.

Options

When situations like this occur, we have a few options:

  • One option is to simply design the page in a way that doesn’t require the use of animation AND filters. This eliminates the possible competition for resources, and make sure that either the filters or the animations work smoothly.
  • Along the same lines, you could also make the animations and filters conditional on the size of the viewport, only targeting larger devices that most likely would have additional processing power to do both.
  • Another option, especially if you have to have both, is to try to force hardware accelerations on the elements that are involved. For instance, using the rule transform: translateZ(0) will force, when possible, the device to use the GPU to handle the effects. The result, when it works properly, is a better experience. The downside is that it can also affect battery life, so that needs to be considered as well.

Mobile Example

Here’s an example of some basic animation coupled with CSS filters. The first option does them both without any type of optimization. The second uses the hardware acceleration trick. And the third disables the filters altogether. Although the differences in performance may not be noticeable on a desktop browser, it usually is on mobile devices (I used an iPhone 5 for testing, and there was definite lag on the first option).

See the Pen mVKRxx by Shawn Maust (@afasterweb) on CodePen.

Be Careful

CSS filters and the other goodies that are now available can be fun to play with. But if and when we choose to use them, it’s also important to keep an eye on mobile performance to make sure that our mobile users don’t pay too high a price.