New issue
Advanced search Search tips
Starred by 16 users

Issue metadata

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



Sign in to add a comment

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

Project Member Reported by aerotwist@chromium.org, Mar 22 2017

Issue description

If you go to http://googlechrome.github.io/ui-element-samples/animated-clip/advanced/ 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 flackr@chromium.org, Mar 22 2017

Cc: sunxd@chromium.org
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.
Components: Blink

Comment 3 by kochi@chromium.org, Mar 23 2017

Components: -Blink Blink>Animation
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.
Cc: trchen@chromium.org
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 sunxd@chromium.org, 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 sunxd@chromium.org, 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 sunxd@chromium.org, Jun 16 2017

I think it's related to how gl_renderer draws RPDQ with scale transforms. I made a minimal case https://jsfiddle.net/txh7zqqw/.

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.
In the class 

   .expando__inner

Remove the property

   overflow: hidden;

Then the text is no longer blurry.

Sign in to add a comment