New issue
Advanced search Search tips

Issue 813378 link

Starred by 2 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Elements with nested CSS transforms disappear inside CSS columns

Reported by arubi...@gmail.com, Feb 17 2018

Issue description

Chrome 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.
 
transforms-enabled.png
138 KB View Download
transforms-disabled.png
202 KB View Download
Labels: Needs-Triage-M64

Comment 2 by arubi...@gmail.com, 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
Components: Internals>Compositing>Animation
Labels: Triaged-ET Needs-Feedback OS-Linux
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!
813378.ogv
2.9 MB View Download

Comment 5 by arubi...@gmail.com, 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!
Project Member

Comment 6 by sheriffbot@chromium.org, Feb 19 2018

Cc: viswa.karala@chromium.org
Labels: -Needs-Feedback
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
Cc: flackr@chromium.org
Components: Blink>Paint
Labels: -Type-Bug -Pri-3 -Needs-Triage-M64 Pri-2 Type-Bug-Regression
Owner: chrishtr@chromium.org
Status: Assigned (was: Unconfirmed)
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.
Labels: Hotlist-Interop
Labels: RegressedIn-63 FoundIn-66 Target-66 FoundIn-64 FoundIn-65 FoundIn-63

Comment 10 by chrishtr@chromium.org, Today (14 hours ago)

Components: Blink>Layout>MultiCol
Status: Available (was: Assigned)

Comment 11 by chrishtr@chromium.org, Today (14 hours ago)

Owner: ----

Sign in to add a comment