Blog: Web Design
Blurry Man Walking through a tunnel

Webkit Bug Fix: Slider Causes Font Weights To Change On Page

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Every browser has it’s own idiosyncrasies.

A browser quirk I found in Safari is directly related to pages with a slider located on the page.

Specifically, when the slides animate, font weights of various HTML elements somewhere else on the page change when the slides animate. Weird, right?

It turns out this is a bug in Webkit browsers like Chrome and Safari. There are some technical aspects to this involving how browsers render a page, and I won’t bore you with those details.

The best way to describe what triggers this bug is: when CSS animation is in effect, anything that might appear on top of the animated element can be affected, if that element’s top or left properties are changed during the animation, if the element follows the animated element.

This sounds complex, but there’s a fairly simple solution to this bug in Chrome and Safari.

Setting The Stage

Let’s say you’ve got a slider at the top of your home page, and whenever the slides move, another page element changes the font weight from bold to normal.

In this case, the browser is using hardware acceleration to render the page with higher quality. But the browser can’t know for certain whether the animated element will overlap the other page elements. The text on the page is, for a split second, rendered as an image, instead of a vector file. This causes the momentary loss in quality.

This bug also seems to be more prevalent when using a font delivery service like Adobe Typekit.

How do we solve the case of flickering text?

The CSS That Solves The Fluctuating Font Weight

For the purposes of illustration, let’s presume the slider has a CSS class of slider, and our flickering text element has a class of text-module.

First, we’ll want to add sub-pixel rendering to the whole page. This helps prevent the flicker of text as the font weights change when the slides animate.

Next, we’ll want to make sure the affected element is above the slider, so we’ll want to adjust the z-index. Think of z-index as the stack of elements from the screen upwards. The higher the number, the higher that element is in the stack. If the slider has a z-index above the default of 0, it may cause Webkit browsers to trigger this bug. We want to make sure the flickering elements have a higher z-index than the slider.

Lastly, we want to make sure the affected fonts have a transparent background. This bug seems to trigger when the background of the affected HTML element is opaque or has a solid color.

Here’s out final CSS:


/**
 * Fix Flickering Text When Slider Animated in Safari and Chrome
 */

html {
  -webkit-font-smoothing: antialiased;
}

.slider {
  z-index: 10;
}
/**
 * We are picking an arbitrary number for z-index here. 
 *
 * We need to make sure the flickering text elements 
 * have a higher z-index than our slider does.
 */

.text-module {
  background-color: transparent;
  position: relative;
  z-index: 20;
}
/**
 * The z-index for this element is higher than the slider.
 *
 * This should prevent the font weight from changing 
 * when the slide animation is running.
 */

We added position: relative to our previously flickering page element so that the z-index is sure to have an effect. Elements with position: static are not affected by z-index values.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Join the Conversation

Your email address will be kept private. Required fields marked *.