Using transform scale causes blurry text only on Windows Chrome

Question

I have run into a pretty frustrating problem regarding the CSS transform scale. I have a block of text which I would like to zoom by 105% on hover and it is causing blurriness of the text, but only on the Windows version of Chrome. I found this question and tried the various solutions provided there, but I still cannot get it to work as desired.

body, html {
  font-family:'Open Sans', sans-serif;
}
.zoom {
  transition:transform .5s;
  width:300px;
  margin:50px auto;
}
  .zoom:hover {
    transform: scale(1.05) translateZ(0);
    will-change:transform;
  }
  .zoom h4 {
    font-size:2rem;
    line-height:2.5rem;
    -webkit-font-smoothing:antialiased;
    backface-visibility: hidden;
    -webkit-filter: blur(0);
    filter: blur(0);
    margin:0;
    text-transform:uppercase;
  }
  .zoom p {
    -webkit-font-smoothing:antialiased;
    backface-visibility:hidden;
    -webkit-filter:blur(0);
    filter:blur(0);
    margin:0;
  }

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="zoom">                  
  <h4>Lorem Ipsum</h4>
  <p>Lorem ipsum dolor sit amet, conse ctetur adipiscing elit…</p>
</div>

As I mentioned earlier, this only seems to be an issue on the Windows version of Chrome. On Chrome for OSX, FireFox and even IE this issue does not occur. I am open to using a different solution than transform, provided the animation has a transition as it does in my example. I would, however, like for it to be a CSS only solution.

Any ideas?

score 2 · Answer 1 · edited Mar 21 '18 at 18:33

2

I can't test it myself right now as I don't have a Windows computer handy, but maybe you can do either solutions:

Adding backface-visibility: hidden; to .zoom
Changing your transform on .zoom:hover property to transform: scale(1.05) translateZ(0);

This should trigger GPU material acceleration and just might solve your issue on Chrome. No promises, though. Good luck!

edited Mar 21 '18 at 18:33

NinjaFart

1,626
1
20
24

answered Apr 17 '17 at 17:04

chriskirknielsen

2,839
2
14
24

I had already tried the `backface-visibility` solution based on the other question I found, but it does not resolve the issue. I updated my question to include `translateZ(0);` in the transform as you suggested, but the issue persists. Thank you for the suggestions! – user13286 Apr 17 '17 at 17:06
5

Another idea might be to add the `will-change: transform;` property to`.zoom` but I'm pulling at straws at this point, haha. – chriskirknielsen Apr 17 '17 at 17:10
1

Wow... will-change actually did it for me, thanks @chriskirknielsen! – jscul Aug 09 '21 at 07:48
1

same issue on Linux Chrome; setting `will-change` helped – gekkedev Aug 16 '21 at 12:55

Using transform scale causes blurry text only on Windows Chrome

1 Answers1

Linked