Optimizing animation performance in WebKit on Linux

I am not sure if i can help you with your Project, but one of the things i have learned lately is that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU for better rendering performance in the browser.

Right now most of the modern browsers are shipped with hardware acceleration. They will use it when they see that the DOM will benefit from it. A strong indicator is the 3D transformation.

Lets say that you wanna place your DOM with a position absolute and raise it above the parent container. Instead of that you could actually use -webkit-transform: translate3d(10px,10px,10px); That will resolve into a 3D rendering even if we don't animate the element at all. Even if you set zero values, it will still trigger the Graphic Acceleration.

TIP If you see any flickering then try adding -webkit-backface-visibility: hidden; and -webkit-perspective: 1000;

Now lets talk about the basics of CSS

You should know that the most important thing about how browsers READ your CSS selectors, is that they read them from right to left. That means that in the selector ul > li img[alt="test.png"] the first thing interpreted is img[alt="test.png"]. The first part is also referred as the "key selector".

So first things first, IDs are the most efficient, leaving universals the least. So you could rewrite your CSS code replacing the global ones (when aren't really needed) with IDs.

An other way of slowing your browser down is by adding the global selector upfront. (div#my-div) Something that Chrome is actually doing by default on inspect mode. That will GREATLY slow your browser down.

By far the worst case is the Descendant selectors. Even a selector that fails (when your selector doesn't match anything) is better than html body div ul li a { }

One more thing, that is extremely helpful and clean is the CSS3 selectors (:last-child). Even if those selectors help us and make our life easier, they rip your Browser down. You might not see any difference in performance on a small scale application, but when you introduce them in Enterprise Applications, you will notice that they are slowing down your Rendering.

So to sum up. I just told you that replacing all of your selectors with IDs and applying style on every single element by ID will make your app super fast, but on the other hand it will be a bit silly. It would be extremely hard to maintain and also non-semantic. Thus you should consider replacing most of the selectors with IDs but don't sacrifice semantics / maintainability for efficient CSS

Also you could check an interesting test here.

Now that i think of it, i should start with the CSS basics. Oh well, i hope i helped you even a little with your Project. Cheers

According to Guil Hernandez's article CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine. So what exactly forces the browser to swap to GPU mode? Many browsers provide GPU acceleration by means of certain CSS rules.

Example:

.cube {   -webkit-transform: translate3d(250px,250px,250px)   rotate3d(250px,250px,250px,-120deg)   scale3d(0.5, 0.5, 0.5);}