Solutions to Unwanted Animation Artifacts

As a digital agency, we are constantly building, refining, and dealing with an ever-changing Web technology landscape. Our developers come across interesting technical challenges daily, some of which can be pretty complex. Finding a solution to the “impossible” is what we do best. You could say we thrive on problem solving.

Web applications, marketing materials and informational projects are becoming increasingly interactive. One of our recent projects involved a fair amount of animation, some of them were subtle transitions, some more obvious, but all with the intention of capturing the user’s attention and drawing them to key areas of the website.

While working on these features, we started to encounter strange bugs surrounding the animations. Particular transitions started having artifacts show up in certain browsers on isolated machines. (Artifacts are often used to reference part of an image or code that did not render correctly.) Let me be clear, I said “isolated machines.” This is different from the norm of Web development. We deal with platforms, browsers, settings, etc. We rarely have to worry about the hardware on the user’s end.

We spent quite a bit of time looking into this problem, knowing it could impact subsequent projects in the future. When we narrowed down our search, we had 20,000 Google results. Of those, only five articles mentioned the specific problem in a way that fit our situation. As I mentioned, this issue happened months ago, but now we are seeing it appear as a common problem in other similar interactive projects.

The flickering, or artifacts, relates to a CSS3 property which is only “supported” in Chrome, Firefox and Safari, causes problems in Internet Explorer (IE) and even sometimes in the aforementioned browsers.

The CSS3 property is useful when an element is rotated and you don’t want to see its backside, which sheds light on CSS actually being a three-dimensional being. Even though we weren’t doing rotation, we were encountering the problem. Note: we were doing transitions on the elements.

By implementing the following code, we were able to solve this problem.

.animated-elements {
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
}

We’re hoping that by sharing this information we will help other developers save valuable time when encountering similar problems. To learn more, visit these stackoverflow.com or w3schools.com articles.

There are a few theories on handling this issue. Try selecting the parent element instead of the element directly. Using backface-visibility may also work. Though it uses a lot of memory and can cause devices to crash, one should avoid adding this as a blanket rule in their CSS.

You should feel free to use these methods knowing it can improve rendering quite a bit, but test thoroughly and know the risks.