Issue metadata
Sign in to add a comment
|
Elements with nested CSS transforms disappear inside CSS columns
Reported by
arubi...@gmail.com,
Feb 17 2018
|
||||||||||||||||||||
Issue descriptionChrome Version : Version 64.0.3282.167 (Official Build) (64-bit) URL : https://jsbin.com/buzubexifu/edit?html,css,output Other browsers tested: Safari: OK - Version 11.0.2 (13604.4.7.1.3) Firefox: OK - Version 57.0.4 (64-bit) What steps will reproduce the problem? (1) Apply any CSS transform on child elements, whose container has a column-count property of any number greater than 1. (2) Apply any CSS transform on "grandchild" elements (children of the child elements). What is the expected result? "Grandchild" elements in all columns should be painted to the viewport (visible). What happens instead? The "grandchild" elements in columns greater than 1 are not be painted to the viewport (they're not visible). Please provide any additional information below. Attach a screenshot if possible. Two screenshots included, one with the "grandchild" transforms enabled, and one with them disabled.
,
Feb 18 2018
Update: This can be resolved by adding a backface-visibility property of "hidden" to the grandchild elements. Updated demo: https://jsbin.com/boyukihocu/edit?html,css,output
,
Feb 19 2018
,
Feb 19 2018
Tested the issue on chrome reported version 64.0.3282.167 using Ubuntu 14.04 with steps mentioned below: 1) Launched chrome reported version and Navigated to URL: https://jsbin.com/boyukihocu/edit?html,css,output(as given in Comment#2) 2) In CSS section, tested the behaviour of the jsbin file by using " /* toggle this on/off to see invisible children: */ " Observations: Observed the same behaviour even after making the comment from " /* toggle this on/off to see invisible children: */ " to " toggle this on/off to see invisible children: " @Reporter: Please find the attached screencast for your reference and let us know if we are missed anything in reproducing the issue also provide on which OS you are facing this issue If possible please provide the jsfiddle or codepen URL which will reproduce the issue, because in latest canary builds jsbin URL's are not getting executed(please find Issue: 810668 for the same), provide your inpus on it which helps in further triaging the issue. Thanks!
,
Feb 19 2018
Thanks for your reply, and for the screencast. My apologies, I should have been clearer on my CSS comment. I intended for the viewer to toggle on/off the "transform: translateX(0)" property below the CSS comment, rather than the comment itself. Here is a Codepen version, as requested: https://codepen.io/andyranged/pen/LQQMGr?editors=1100 Please toggle on/of the "transform: translateX(0);" property at the bottom of the stylesheet to see the behavior I'm experiencing. OS: Mac OS X Thank you!
,
Feb 19 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Feb 20 2018
Can reproduce using https://codepen.io/andyranged/pen/LQQMGr?editors=1100 in both stable (64.0.3282.119) and dev (66.0.3346.8) in Linux. 'sub-item' items are not painted in the middle and right-hand column. Firefox renders this example fine. Ran bisect: You are probably looking for a change made after 500791 (known good), but no later than 500792 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/d09b058a2fca054098e5bd14385516425766519b..c3a3481c4b1b08775b477144d1d2873a2a3d9900 Based on suspect CL, assigning to chrishtr@. Chris, can you confirm if your change caused this regression, and if so whether it's directly from your change or whether your change simply seems to have uncovered a different bug? Thanks.
,
Feb 20 2018
,
Feb 20 2018
,
Today
(14 hours ago)
,
Today
(14 hours ago)
|
|||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||
Comment 1 by krajshree@chromium.org
, Feb 18 2018