New issue
Advanced search Search tips

Issue 846613 link

Starred by 1 user
Status: Available
Owner: ----
Cc:
mstensho@chromium.org
chrishtr@chromium.org
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Multicol does not work correctly in the presence of compositing.

Reported by sindre.0...@gmail.com, May 25 2018 
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36

Steps to reproduce the problem:
1. Create a container with a few elements. Style the container with a `column-count` value greater than 1.
2. Create another element with a `transform: translate` effect upon hover.
3. Hover the second element, see that the first element's columns are seemingly re-rendered.

What is the expected behavior?
The columns should stay still.

What went wrong?
Columns are re-rendered.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 66.0.3359.181  Channel: stable
OS Version: 10.0
Flash Version: 

The test case is also available on CodePen: https://codepen.io/sindre/pen/erwExw?editors=1100.
index.html
7.3 KB View Download

Comment 1 by sindre.0...@gmail.com, May 25 2018 

Seeing that CSS Multi-column Layout Module (https://www.w3.org/TR/css-multicol-1/) is only a Working Draft, I guess this will not be fixed until the CSSWG has worked more with it (if I understand things correctly). The Blink implementation also seems a bit different than the one Firefox uses. 

For example, should the columns' container be relatively positioned, in Chrome an absolutely positioned child with `left: 0` positions itself to the left of its column, not its container. In Firefox, the child would render by the left border of the container.

If this should be submitted as its own bug, please say so, and I will file another.

Comment 2 by woxxom@gmail.com, May 25 2018 

Bisected to d88f5fb93af61fdb863c0cbd1bfcfa24873b50d4
"Disallow fragmentation of composited content."
Landed in 53.0.2757.0

Comment 3 by susan.boorgula@chromium.org, May 27 2018

Labels: Needs-Triage-M66

Comment 4 by krajshree@chromium.org, May 28 2018

Labels: Triaged-ET M-69 Target-69 FoundIn-69 OS-Linux OS-Mac
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on Mac 10.13.3, Win-10 and Ubuntu 17.10 using chrome reported version #66.0.3359.181 and latest canary #69.0.3442.0.
This is a non-regression issue as it is observed from M60 old builds. 

Hence, marking it as untriaged to get more inputs from dev team.

Thanks...!!

Comment 5 by e...@chromium.org, May 29 2018

Cc: mstensho@chromium.org
Components: -Blink>CSS Blink>Layout>MultiCol
Status: Available (was: Untriaged)

Comment 6 by mstensho@chromium.org, May 29 2018

Cc: chrishtr@chromium.org
I'm aware that compositing combined with multicol has issues, but in this case, the element that's composited isn't inside the multicol container. Isn't that supposed to work?
tc.html
284 bytes View Download

Comment 7 by mstensho@chromium.org, May 29 2018 

(Regarding comment #1, about relative positioning or not, I suggest that you file another bug for that)

Comment 8 by chrishtr@chromium.org, Jun 2 2018

Labels: -Target-69
Summary: Multicol does not work correctly in the presence of compositing. (was: CSS columns (column-count) are affected by transform transition on another element)
This is an example of not fragmenting correctly under compositing.

The reason is that the green, relative positioned child ends up with
a compositing trigger. This is because the 3D transformed div
has an inline transform, which puts the compositing code in an
"assumed overlap" mode for positioned elements that paint layer.

Not sure if there is a common bug to dup against for such issues,
so let's use this one. Renamed issue accordingly.

It should be fixed by SPv2.
►

Sign in to add a comment