Font flickering or blurriness

This article is useful when vector elements inside or outside of the slider are getting blurry or thin, this might happen only during the transition, or permanently. Most often in desktop webkit browsers – Chrome or Safari. And most often with custom fonts, svg icons, thin elements, elements that overlap slider, or elements with box-shadow and border-radius.

This is hardware-acceleration bug of browser that is caused by CSS3 transforms.

Ways to fix it:

  1. Apply -webkit-backface-visibility:hidden and/or -webkit-transform:translateZ(0); transform:translateZ(0); style to elements that behave incorrectly (e.g. .element-class { -webkit-backface-visibility:hidden }. This will force browser to create a separate layer for the element.

  2. Disable CSS3 transitions (allowCSS3:false), in WordPress version of a slider this option can be changed in "Miscellaneous" section. Note that disabling CSS3 transition will make slider transitions less smooth.

  3. Reduce the contrast between text and background, remove all styles that are hard to render (like box-shadow, border-radius and opacity).

About iOS

It's not recommended to disable CSS3 animations on iOS, as animations will be a lot less smooth and this bug never happens on them.

Side note about how CSS3 hardware-accelerated animation works

When hardware acceleration is enabled on element, webkit browser takes "snapshot" of affected area and stores this part as an image (texture), this makes animation fast and smooth.


Found a mistake in the article? Know how to improve it? Please open support ticket.