Blurry Text on Chrome When Using CSS -Webkit-Transform

Blurry text in Chrome, any fix?

This is not a bug in your code, this is well known Webkit rendering bug. See for example: https://support.mozilla.org/pl/questions/1075185 (and many more threads on FF support forums).

In both Chrome and FF, in advanced browser settings you can turn off what is called "hardware acceleration". This setting exists to let your hardware "help out" browser when in comes to advanced graphics rendering. Hardware acceleration automatically turns on for elements that you use translate and some other rules on. This is actually sometimes used by inexperienced "super css hackers" to achieve some better/clearer rendering in some cases.

But sometimes it causes more bad than good and this is your case. Once you turn hardware acceleration off in your browser the font is perfectly clear. Sadly there's no real solution code-wise, you can't force turning it off for a given element. We are dependent on Webkit developers fixing the rendering engine here. You can only hack around, like for example change font size to one which for no real reason renders better. Or change positioning in some way which doesn't involve translate. Best of luck to you.

Blurry font after applying transform

scale was the biggest culprit here. Scaling up over 1 causes blur, so rather than scaling up when hovered, I had the element scale down and up to 1 when hovered.

Additionally, removing perspective from transformation yielded crisp text and images.

Text blurs when using transition and scale Chrome and FireFox

You can accomplish a very similar effect using font relative units (em) and increasing the element font-size on hover.

button {
  font-size: .875em; /* =14/16 or whatever your base font size is */
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
}

Note this generally considered to be less performant than using transforms, at the very least try to position the element so that there are fewer re-flows around it.

Chrome 64 on Windows 10:

button {  background-color: cornflowerblue;  border: 1px solid cornflowerblue;  font-weight: bold;  font-size: .875em; /* =14/16 or whatever your base font size is */  color: #fff;  padding: .625em; /* =10/16 */  border-radius: .1875em; /* =3/16 */  transition: all .33s ease-in-out;  transform: translateX(-50%) translateY(-50%);}
button:hover {  font-size: 1em; /* close enough to 1.1x */  transition: all .33s ease-in-out;}

<span style="position: relative; left: 2.5em; top: 1em;">  <button>Hover me</button></span>

Chrome : Text blurry when skew back : skew(-10deg) - skew(10deg)

The "blurry text" after 2d or 3d transforms with webkit browsers has been discused many times. But in your case, you can apply the transform only on a pseudo element so that your text isn't affected by the skew property.

It will also alow you to use only one tag in your markup :

@import url(https://fonts.googleapis.com/css?family=Oswald);body{color:#fff;font-weight: bold;font-size:50px;font-family:'Oswald',sans-serif;}
.parent {    width: 300px;    overflow: hidden;    padding-left: 5%;    position:relative;}
.parent::before {    content :'';    position:absolute;    top:0;left:0;    width:100%; height:100%;    background: rgba(90,190,230,0.9);    transform-origin:0 0;    transform:skew(-10deg);    z-index:-1;}

<div class="parent">    Hello</div>

---

Related Topics