| Summary: | CSS3 Multicolumn box occasionally gets taller | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Yuta Kitamura <yutak> | ||||||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | UNCONFIRMED --- | ||||||||||
| Severity: | Normal | CC: | ahmad.saleem792, ap, osvaldo.rivera1994, pemrichm, simon.fraser, svillar, zalan | ||||||||
| Priority: | P2 | ||||||||||
| Version: | 528+ (Nightly build) | ||||||||||
| Hardware: | PC | ||||||||||
| OS: | OS X 10.5 | ||||||||||
| Attachments: |
|
||||||||||
Created attachment 32516 [details]
Screenshot
See section 7 of CSS3 Multi-column spec. http://www.w3.org/TR/2009/WD-css3-multicol-20090630/#filling-columns This isn't an occasional or random thing. It can be reproduced with some regularity. I don't think this is a problem with columns per se, but something that webkit's implementation of columns draws more attention to. It really appears to be a font rendering issue. After twiddling the code, I notice that rendering of certain fonts magnifies the issue most. Created attachment 94074 [details]
Demonstration of why it doesn't appear to be solely a columnar rendering issue.
I am still able to reproduce this issue in Safari 15.5 on macOS 12.4 using attached "test case" and output matches the original screenshot from 2009. For other browser, Chrome Canary 104 and Firefox Nightly 103 also have different behavior on attached test case from Safari and each other. I am not sure, which browser is rendering this correctly. Thanks! |
Created attachment 32515 [details] Test case CSS3 Multicolumn box occasionally becomes taller than the size of the children. WebKit trunk renders the attached test case wrongly. The second block is taller than the other blocks, while all the blocks should have the same height.