1467444 - CSS column flicker if column container is fixed (with content having margin-bottom) and js causes redraw of some other element

Status: NEW

(Core :: Layout: Columns, defect, P3)

Description

[gabriel]

Attachment: Video showcasing the column flickering bug

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180604143143

Steps to reproduce:

I have an fixed element. Inside it there is div which is specified to have two columns (through css). Inside the columnar element are nested ul/ol elements with margins.

There is another element outside of the above structure, also fixed, and whose width changes while user scrolls (but does not affect anything else since it is fixed).

Testcase: https://jsfiddle.net/gaby/g3mp8th6/

Using version 61.0b11 (64-bit) on the beta channel. 


Actual results:

Depending on margins of the ol/ul elements and the width of their container, while the user scrolls the "engine" seems to try to recalculate how to break the text in the columns and comes up with different values each time, cause a flicker in the columns.


Expected results:

It should not flicker.

Comment 1

[gabriel]

Updated the test case to not rely on scroll. Just updating the width of an irrelevant position:fixed  element triggers the redraw.

https://jsfiddle.net/gaby/g3mp8th6/

Comment 2

[Daniel_A[:daschilean] [Please contact - [e-mail]]]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:61.0) Gecko/20100101 Firefox/61.0
Build ID: 20180607135512   
I manage to reproduce this issue on Windows 7 x86 with the latest FF 61.0b12 (64-bit). Please note that this issue is also reproducible on Windows 10 x64.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

This looks fixed here. May have been fixed by recent multicol work by Ting-Yu?

Maybe worth adding a test-case.

Comment 4

[Ting-Yu Lin [:TYLin] (PST, UTC-8)]

This is fixed only when layout.css.column-span.enabled=true.

Note that the test case contains

ol,
ul {
  margin: 25px 0;
}

nsColumnSetFrame has issues dealing with margin-bottom's margin collapsing. If the margin is 0, the bug is gone. This bug still worth tracking, though.