New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 17 users

Issue metadata

Status: Available
Owner: ----
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Bug

Sign in to add a comment

Issue 704067: Scale / counter-scale transform animations causes blurry text on low-dpi devices

Reported by, Mar 22 2017 Project Member

Issue description

If you go to on a low-dpi device and click on the button you'll see the circle expand and reveal some content. During the animation the text is blurry and then at the end it's sharp.

The approach for the animation is to scale the circle and counter-scale the contents (to keep it at its original size).

What's super weird to me about this is that if I remove the border-radius the text is no longer blurry.

Comment 1 by, Mar 22 2017

Hmm, the fact that it's border radius dependent suggests this may be because of  issue 567296 . However, I feel like we'd expect to see lots of repainting if that was the case.

Comment 2 by, Mar 22 2017

Components: Blink

Comment 3 by, Mar 23 2017

Components: -Blink Blink>Animation

Comment 4 by, Mar 24 2017

Components: -Blink>Animation Internals>Compositing>Rasterization
Labels: -OS-Mac OS-All
Status: Available (was: Untriaged)
This is most likely due to the composited transform: scale() animation and would be decided by paint whether the image gets rasterised to avoid blurriness.

Comment 5 by, Jun 16 2017

Tien-Ren/Xianda, do you have any idea why this is happening? I think the only difference between border-radius and not is a composited mask. Is there a rounding
bug in there?

Comment 6 by, Jun 16 2017

Currently mask tiling is not enabled. It seems the issue still persists even if we do not composite anything by removing all will-change:transform (I see no cc layers in devtools, but I'm unsure about this, correct me if I'm wrong). Also only removing the border-radius property of the .expando element does not make the blur go away. Still thinking...

Comment 7 by, Jun 16 2017

Looks like the problem only happens with gl_renderer, and it's related to render surface as it persists if I replace border-radius with opacity:0.99.

Comment 8 by, Jun 16 2017

I think it's related to how gl_renderer draws RPDQ with scale transforms. I made a minimal case

The two scale factors: 8.123424141 * 0.1231007987 = 1.

Even in stable it's blurry. And I believe when you adjust the scale factor, the blurred text can look crisp if the scale factor is some certain magic value. And this causes the flickering animation.

Comment 9 by, Mar 17 2018

In the class 


Remove the property

   overflow: hidden;

Then the text is no longer blurry.

Sign in to add a comment