Have you noticed a page lag / flickering or overall display performance issue when you scroll or do an action on your UI? Are you using some CSS3 features?

If you have some fancy decorations like bluring, shadows, alphas or animations with CSS3, it is quite possible that you will encounter some of those issues mentioned above.

One possible solution is to use your GPU Hardware acceleration. This will maintain the performance with CSS3. To activate that, you’ll need to manually ask for a three dimensional operation on your specific culprit element.

Apply a 0 pixel on the 3D transform property of a class and associate it to any element:

.gpu-acceleration{-webkit-transform: translateZ(0)}
<div id="element" class="gpu-acceleration"></div>

Be careful to not abuse this. In some case you might want to do a proper analysis and see if this can be fixed with other methods.

Read more about Front-end performance optimization Opens in a new window