position:absolute element wider than its (multi-)column not clipped at middle of column-gap

RESOLVED INVALID

Status

()

Core
Layout: View Rendering
RESOLVED INVALID
2 years ago
7 months ago

People

(Reporter: Chris Rebert, Unassigned)

Tracking

(Blocks: 1 bug, {testcase})

Trunk
testcase
Points:
---

Firefox Tracking Flags

(firefox50 affected)

Details

Attachments

(3 attachments)

(Reporter)

Description

2 years ago
Created attachment 8765355 [details]
Screenshot of different rendering in Firefox 49.0a2

Original Bootstrap issue: https://github.com/twbs/bootstrap/issues/20161

Steps to reproduce:
1. Open the attached testcase in Firefox.
2. Resize the window to ~600px-700px wide.
2. Observe the red boxes.

Firefox's behavior:
The red boxes go under the 2nd and 3rd green boxes in their rows, but you can see them in the gaps between the columns.
(See Firefox screenshot)

Chrome/Safari/Edge's behavior:
The red boxes get clipped off at an imaginary vertical line which runs along
the horizontal center of the gap between the 1st and 2nd columns.
(See Chrome screenshot)

Details:
The testcase has a CSS multicolumn container that contains 3 columns.
Inside the container are several "cards" which are position:relative.
Inside the first 2 cards are position:absolute <div>s which are much wider than the width of a single column.
I'm not sure what behavior https://drafts.csswg.org/css-multicol/ dictates in this case or what behavior would be most desirable.
As Firefox is apparently in the minority in its handling of this case, I'm treating this as a Firefox bug for now.
(Reporter)

Comment 1

2 years ago
Created attachment 8765358 [details]
Screenshot of Chrome's rendering (same as Safari & Edge)
(Reporter)

Comment 2

2 years ago
Created attachment 8765359 [details]
Testcase demonstrating the bug
(Reporter)

Updated

2 years ago
Blocks: 1230801
(Reporter)

Updated

2 years ago

Comment 3

7 months ago
https://github.com/w3c/csswg-drafts/issues/314#issuecomment-310138645
"RESOLVED: Columns do not clip by default"
Status: NEW → RESOLVED
Last Resolved: 7 months ago
Keywords: testcase
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.