WebKit: Blurry text with css scale + translate3d

Question

I'm seeing an issue where Chrome and other WebKit browsers massively blur any css-scaled content that also has translate3d applied.

Here's a JS Fiddle: http://jsfiddle.net/5f6Wg/. (View in Chrome.)

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  /*-webkit-transform: scale(1.2);*/
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

Are there any known workarounds for this? I get that in the simple example above, I could simply use translate rather than translate3d - the point here is to strip the code down to the bare essentials.

A small addittion: in last Chrome i stucked with problem like when using not rounded values for `translate3d`. Rounding them fixed all blurr for me. — saroff, May 25 '17 at 16:17

score 36 · Accepted Answer · answered Nov 07 '11 at 15:37

36

Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration. The only solution to this would be to increase the size of the text and downscaling the element, in essence creating a higher res texture.

See here: http://jsfiddle.net/SfKKv/

Note that antialiasing is still underpar (stems are lost) so I'm beefing up the text with a bit of text shadow.

answered Nov 07 '11 at 15:37

methodofaction

70,885
21
151
164

1

will it be much slower on mobile webkits then? – Alex K Mar 28 '13 at 11:16
Great solution, looks a bit like a retina solution, but then for desktops. Love the idea, implementing it right now, super-props. – ReSpawN Aug 13 '13 at 09:10
7

Looks pretty awful to me in Chrome Version 54.0.2840.71 m (64-bit) – Amethi Oct 29 '16 at 10:35

score 35 · Answer 2 · answered Jun 27 '13 at 08:45

35

I found that using:

-webkit-perspective: 1000;

on the container of your font or icon set kept things crisp for me after experiment with the issue on Android nexus 4.2 for sometime.

answered Jun 27 '13 at 08:45

hallodom

6,429
1
23
19

3

Dang, that did it! Along with -webkit-transform: translate3d(0,0,0). The letter forms were popping into place in an odd way at the end of the scale, and this fixed it. Tried everything else under the sun. – jwinn Nov 21 '13 at 00:39
1

Assume this is because those properties trigger GPU acceleration, also increasing performance of transitions on those elements! :) – hallodom Jan 08 '14 at 13:06
1

@SergeiBasharov i don't think the OP wanted a mobile solution. And on desktop it doesn't do anything. I upvoted this answer but that's all. – Teodor Sandu Dec 10 '14 at 06:46
I also needed `-webkit-transform: translate3d(0,0,0)` – Phil Hudson Jun 02 '16 at 04:09

score 28 · Answer 3 · edited May 23 '17 at 12:02

28

A css filter effect is a graphical operation that allows to manipulate the appearance of any HTML element. Since Chromium 19 these filters are GPU accelerates to make them super fast.

CSS3 introduces a bunch of standard filter effects, one of them is the blur fitler:

-webkit-filter: blur(radius);

The ‘radius’ parameter affects how many pixels on the screen blend into each other, so a larger value will create more blur. Zero of course leaves the image unchanged.

Set the radius to 0 will force browser to use GPU calculation and force it to keep your html element unchanged. It's like applying an "hard edges" effects.

So the best solution for me in order to fix this blurry effect was to add this simple line of code:

-webkit-filter: blur(0);

There is also a known bug that only affects retina screens. (See here: Why doesn't blur(0) remove all text blur in Webkit/Chrome on retina screens?). So in order to make it works also for retina, I recommend to add this second line:

-webkit-transform: translateZ(0);

edited May 23 '17 at 12:02

Community

1
1

answered Sep 01 '15 at 13:46

maoosi

301
4
7

1

please give some explanation to your answer – Blip Sep 11 '15 at 03:28
As a note applying blur on the fly in dev tools seems to not have the same effect as it being there on page load. Not sure if it was just me but this may be the answer you are looking for, just reload the page. – Spaceman Sep 15 '15 at 23:09
5

After trying EVERYTHING else on a google search this was the fix. Thank you! – th317erd Oct 06 '15 at 19:54
this worked for me! .modal { max-width: calc(100% - 50px); max-height: calc(100% - 50px); position: fixed; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-filter: blur(0); overflow: hidden; } – Nateous Oct 27 '15 at 13:03
1

maoosi's answer used to work for me, but something seems to have changed as it doesn't work anymore in the latest Chrome? – Amethi Oct 29 '16 at 10:32

Miguel · Answer 4 · 2017-07-31T11:39:46.350

5

Try this

 ...{
zoom:2;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}

Or for a more exact approach you can call a javascript function to recalculate the transformation matrix by removing the decimal values of the matrix. see: https://stackoverflow.com/a/42256897/1834212

edited Jul 31 '17 at 11:39

answered Mar 09 '16 at 13:26

Miguel

3,349
2
32
28

for me just `zoom: 1.005;` worked well. no need to use `scale` – Jithin Raj P R Nov 30 '18 at 11:51
Unfortunately `zoom` cannot be animated, so attempting to use in in frames ends up looking choppy @JithinRajPR – Aaron Meese Jun 23 '22 at 00:48

score 2 · Answer 5 · answered Sep 11 '12 at 20:10

I came across this issue when using the isotope plugin (http://isotope.metafizzy.co/index.html) in combination with the zoom plugin (http://janne.aukia.com/zoomooz/). I built a jquery plugin to handle my case. I threw it up in a github repo in case anybody could benefit from it. - https://github.com/charleshimmer/jquery-hirestext.

score 0 · Answer 6 · answered Nov 13 '15 at 14:20

0

I used javascript to move the text 1px top and then with 100ms after, back 1px down. It's almost unperceptive and solved the problem completely cross-browser.

answered Nov 13 '15 at 14:20

Mixtelf

13
2

score -1 · Answer 7 · answered Jul 31 '12 at 21:26

-1

body {
-webkit-font-smoothing: subpixel-antialiased;
}

or I think you could put that on a specific element, but I was having problems with one element affecting the whole site.

I think it is a problem with custom font-face fonts.

answered Jul 31 '12 at 21:26

placeboaddict

130
3

1

Appreciate that you're trying to add value here, but the JS Fiddle I provided doesn't use a custom font, and -webkit-font-smoothing doesn't seem to make any difference. Does it work for you in the Fiddle above? – phil Aug 08 '12 at 23:22
1

subpixel-antialiased font-smoothing is now the default in Chrome. – posit labs Jan 29 '13 at 00:09

score -2 · Answer 8 · edited Jun 22 '15 at 14:22

-2

Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration.

This has nothing to do with it. You'll notice that your aliasing problem can be fixed with the addition of duration and direction information (e.g. 0.3 linear). Your having a mare trying to render everything at runtime:

Same for the above ^

edited Jun 22 '15 at 14:22

Prusprus

7,987
9
42
57

answered Jan 30 '12 at 17:12

Tom

13
1

3

Sorry Tom, but I have no idea what you're referring to. Are you talking about adding an animation? (The intent was just to scale, not to animate anything.) If you modify the original JS Fiddle, maybe that would help. – phil Feb 08 '12 at 22:37
Since I am using a transition I added duration, and direction. The blur still persists. – Quentin Engles Aug 22 '17 at 19:08

WebKit: Blurry text with css scale + translate3d

8 Answers8

Linked

Related