Pseudo elements not displayed correctly in columns
Reported by
wanz...@gmail.com,
Jan 27 2018
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safari/537.36 Steps to reproduce the problem: 1. Use Chrome version higher than v62 2. Open attached demo file or https://jsfiddle.net/d8cw85tw/ 3. Hover the boxes with the numbers label "1","3" and "13" What is the expected behavior? * Tooltip should be shown OVER other columns (higher z-index) and not clipped/cut off * Tooltip should not disappear after transtion ends What went wrong? * Number 1 working (tooltip shown correctly) * Number 3 z-index issue (second column overlaps the tooltip) * Number 13 (second column) tooltip disappears after transition ends Did this work before? Yes Chrome v62 Does this work in other browsers? N/A Chrome version: 64.0.3282.119 Channel: stable OS Version: 10.0 Flash Version: More information how this bug was explored can be found in this Github issue: https://github.com/chinchang/hint.css/issues/60
,
Jan 28 2018
,
Jan 29 2018
Able to reproduce the issue on chrome version 64.0.3282.119 and latest canary 66.0.3334.0 using Ubuntu 14.04, Windows-10 and Mac 10.13.1 hence providing Bisect Info Bisect Info: ================ Good build: 63.0.3211.0 Bad build: 63.0.3212.0 You are probably looking for a change made after 500791 (known good), but no later than 500792 (first known bad). https://chromium.googlesource.com/chromium/src/+log/d09b058a2fca054098e5bd14385516425766519b..c3a3481c4b1b08775b477144d1d2873a2a3d9900 Reviewed-on: https://chromium-review.googlesource.com/646700 @chrishtr: Please confirm the issue and help in re-assigning if it is not related to your change. Thanks!
,
Jan 31 2018
(switching components based on bisect result)
,
Jan 31 2018
,
Jan 31 2018
,
Feb 2 2018
The reason the tooltip is disappearing at the end of the animation
is because we don't currently support
fragmentation of composited content into multiple pieces.
Removing the CSS rule
li {
transform: translateZ(0);
}
fixes that. This leaves the issue that the tooltip is clipped.
This is a limitation of the way that multicol/fragmentation is implemented in
Chrome, where we figure out the size of columns and then fragment them.
I think the paint/compositing code is working as intended.
I'm not sure if there is an issue in layout where we fail to expand column
clips to contain pseudoelements - Morten?
,
Feb 2 2018
,
Feb 2 2018
I forgot to mention that:
li { z-index: 0; transform: translateZ(0); }
li:hover { z-index: 20; }
This lines just were added for Blink/WebKit, which worked till Chrome 62.
Gecko didn't had/doesn't have this problem.
,
Feb 4 2018
,
Feb 5 2018
Pseudo elements don't seem to be required here. Attaching simplified TC. It seems that you need a transform inside a transform. The inner one needs to be absolutely positioned. We need to be past the first column. But the elements themselves can live inside one and the same column (the second column, in the test), and we still fail to paint this. So we don't even need to fragment for this problem to occur. Chris?
,
Feb 6 2018
,
Mar 14 2018
I have created a fiddle here: https://jsfiddle.net/jpduckwo/rh61w94y/ There a combination of overflow: hidden; transform: translateZ(0); border-radius: 6px; Seems to be reproducible issue. Comment out either one of them and it will work It does not required nested transforms to appear |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by wanz...@gmail.com
, Jan 27 2018