New issue
Advanced search Search tips

Issue 648832 link

Starred by 4 users
Status: Archived
Owner: ----
Closed: Sep 2017
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

Blurry text after animating BOTH translate() and scale() transforms

Reported by kirshes...@gmail.com, Sep 21 2016 
UserAgent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36

Steps to reproduce the problem:
1. Open the attached blurBlog.html
2. Click the button, which will perform CSS-animation on translate() and scale()
3. Observe that the text is blurry, even though scale(1).

What is the expected behavior?
The text is not supposed to be blurry, because the scale(1) is applied AND the transition has finished.

What went wrong?
When translate() and scale() are applied, the text is only supposed to be blurry when the element is scaled by less than 1. However, in this example,

Did this work before? Yes Not sure about version, but it worked in my browser 1.5 weeks ago

Chrome version: 53.0.2785.116  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: Shockwave Flash 23.0 r0

This bug does NOT appear on Android mobile Chrome.

A note on other mentions on the internet. A week ago, there was no mentions on StackOverflow or other websites about the same bug. However, since them, I was able to find 2 mentions:
http://stackoverflow.com/questions/39600407/css3-transform-scale-blurry-desktop-perfect-mobile
http://www.it1me.com/it-answers?id=14677490&ttl=Blurry+text+after+using+CSS+transform%3A+scale()%3B+in+Chrome
blurBug.html
1.1 KB View Download
screenshotBlurBug.png
78.2 KB View Download

Comment 1 by kirshes...@gmail.com, Sep 21 2016 

Correction to "What went wrong?"
When translate() and scale() are applied, the text is only supposed to be blurry when the element is scaled by MORE than 1. However, in this example, the text is still blurry even though the scale is 1.

Also, worth to note, the bug does NOT happen when ONLY translate() or ONLY scale() are applied. It only happens when BOTH translate() and scale() are applied.

Comment 2 by shajith....@gmail.com, Sep 22 2016 

I'm facing similar issue in Chrome browser Version 53.0.2785.116 m.

transform:translateY(-10px) is creating flickering affect on the above chrome browser and same thing was working fine with earlier version.
Project Member

Comment 3 by sheriffbot@chromium.org, Sep 22 2017

Status: Archived (was: Unconfirmed)
Issue has not been modified or commented on in the last 365 days, please re-open or file a new bug if this is still an issue.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
►

Sign in to add a comment