graphic glitch of text with scale when mouse hover sibling elements
Reported by
jeremy.j...@gmail.com,
Aug 18 2016
|
|||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.57 Safari/537.36 Example URL: Steps to reproduce the problem: 1. Open attached html file 2. Move mouse over second and third boxes What is the expected behavior? The text should not glitch and not react to the movement of the mouse over different elements. What went wrong? The text of the first box glitches, see attached gif Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 53.0.2785.57 Channel: beta OS Version: 10.0 Flash Version: Shockwave Flash 22.0 r0
,
Aug 19 2016
,
Aug 25 2016
,
Aug 29 2016
The glitch occurs due to the a transition: transform.
There is this rule:
.card:hover .card-image {
transform: scale(1.1, 1.1);
}
and this rule:
.card.selected {
z-index: 1;
transform: scale(1.11, 1.11);
cursor: default;
}
So when the hover state changes we seem to believe that there is a transform transition and we animate the transform from 1.11 to 1.11, in the process causing some snap behavior introducing the glitch.
First question is for the animation team: Should we even be doing the transition in this case? It seems not since the transform is not actually changing.
,
Aug 29 2016
,
Aug 29 2016
As per comment #1, this is a regression since M36. If that is true, then this won't block M53 Beta/Stable , correct?
,
Aug 29 2016
schenney@ You have 1.1 and 1.11, so it would transition by 0.01 ?
,
Aug 29 2016
@govind, the confusion was that in comment #1 the M-53 label was added. Normally a bisect would add the M label corresponding to the regression.
,
Aug 29 2016
@schenny, see comment #7. This is probably not even a regression since the range flagged includes "Enable unprefixed CSS Transforms by default", and the testcase uses only unprefixed transforms.
,
Sep 1 2016
I think the 1.1 vs 1.11 difference is a red herring. They're not applying to the same thing, so I don't think anything is transitioning from 1.1 to 1.11. Even if they're the same value, the text glitches. When I change them both to 1.0, and zoom in, I can see the hover causing the "GROUP" text in box 1 to jump, and the border-radius corner rounding in boxes 2 and 3 to momentarily disappear. This still happens if I remove the transform on .card.selected. Then removing the transform on .card.selected .card-content changes things again, but the border-radius change is still happening. It's not clear to me whether this is an animations issue or not. Sending back over to Paint folks for the next pass. Also changing from Bug-Regression to Bug per #9.
,
Sep 1 2016
,
Sep 1 2017
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. If you change it back, also remove the "Hotlist-Recharge-Cold" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Sep 5 2017
This appears to be fixed. At 100% on Linux there is no change in the left text box when the center and right are hovered. This might be due to the fix for sub-pixel layer positions. At 125% there is a minor text layout change in the left box - the "i" moves a little. That is almost certainly some snapping issue but not worth fixing. If your experience differs from this, please re-open the bug.
,
Sep 5 2017
|
|||||||||||||
►
Sign in to add a comment |
|||||||||||||
Comment 1 by rnimmagadda@chromium.org
, Aug 19 2016Components: Blink>Layout
Labels: -Type-Compat M-53 OS-Linux OS-Mac Type-Bug-Regression
Owner: esprehn@chromium.org
Status: Assigned (was: Unconfirmed)