New issue
Advanced search Search tips

Issue 793794 link

Starred by 3 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Dec 2017
Cc:
Components:
EstimatedDays: ----
NextAction: 2017-12-25
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Other Items on page change color on hover of a link containing a transform transition

Reported by deboem...@gmail.com, Dec 11 2017

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36

Steps to reproduce the problem:
1. hover the link
2. watch other items change color for the duration of the transition
3. hover out

What is the expected behavior?
You would expect the color to stay the same

What went wrong?
Items change color

Did this work before? N/A 

Does this work in other browsers? No
 in Opera it's identical (also Blink)
in Safari something comparable happens

Chrome version: 63.0.3239.84  Channel: stable
OS Version: OS X 10.12.6
Flash Version: 

Live example here: https://codepen.io/picturit/pen/XVrRGY
 
Components: Blink>Paint
Labels: Needs-Feedback
NextAction: 2017-12-25
Not present in Linux Version 63.0.3239.70 (Official Build) beta (64-bit). Or M-64 on Mac 10.12.6, or 63.0.3239.90 on Mac 10.12.6.

Could you please provide a video demonstrating what you see?

And go to "chrome://GPU" and cut-and-paste the contents here?

Does disabling GPU rasterization make any difference? See the internet for how to do that on your platform.

Comment 2 by woxxom@gmail.com, Dec 11 2017

I see the difference. 
It's extremely subtle here in Windows though (sub-pixel rendering), see the attached gif.
To see it *clearly* you can use the built-in Magnifier app at 400%.

Issue 781566 has a test case with a much more pronounced difference.
Bisection range found there applies to this issue as well.
It'd be nice if someone does a per-revision bisect.
glitch.gif
36.3 KB View Download

Comment 3 by woxxom@gmail.com, Dec 11 2017

FWIW chrome://gpu
gpu.txt
8.0 KB View Download

Comment 4 by woxxom@gmail.com, Dec 11 2017

Disabling hardware acceleration in browser settings has no effect here.
Labels: -Needs-Feedback
Status: WontFix (was: Unconfirmed)
In that case this is very minor changes in appearance due to the text shifting to a composited layer for the transition. For good performance we composite (use the GPU to move content around) when animating transitions, but compositing is incompatible with LCD text rendering because the text is no longer integer aligned. The jump from LCD to anti-aliased text creates the appearance change.

We will not be fixing this. On your end you could add "will-change: transform" to the element with the transition on it, and then the text will always be composited.

Comment 6 by woxxom@gmail.com, Dec 12 2017

schenney@, the workaround with "will-change:transform" works for that other issue's test case too.

Comment 7 by woxxom@gmail.com, Dec 12 2017

It's strange though, that unrelated elements with no transition on them are affected.

Comment 8 by deboem...@gmail.com, Dec 12 2017

Thanks guys, this helps!
Strangely enough however, the fix works like a charm in my live example, but not on the page within my project. Well, at least we now know where to look, so we will solve this.

Thanks again!
The behavior of what we call "layer squashing" is probably why unrelated elements get composited on the transition. In DevTools, there is a "Rendering" tool under "More Tools" in the gear menu. That has an option to see the layers for content and might help in debugging your page. Please don't spread will-change: transform around everywhere. Too much of it will hurt performance by creating too many layers.
The NextAction date has arrived: 2017-12-25

Sign in to add a comment