Issue metadata
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 descriptionUserAgent: 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
,
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.
,
Dec 11 2017
FWIW chrome://gpu
,
Dec 11 2017
Disabling hardware acceleration in browser settings has no effect here.
,
Dec 12 2017
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.
,
Dec 12 2017
schenney@, the workaround with "will-change:transform" works for that other issue's test case too.
,
Dec 12 2017
It's strange though, that unrelated elements with no transition on them are affected.
,
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!
,
Dec 12 2017
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.
,
Dec 25 2017
The NextAction date has arrived: 2017-12-25 |
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by schenney@chromium.org
, Dec 11 2017Labels: Needs-Feedback
NextAction: 2017-12-25