[Webkit-unassigned] [Bug 209282] New: CSS Grid columns are wrong on successive layouts when align-items: baseline

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=209282

            Bug ID: 209282
           Summary: CSS Grid columns are wrong on successive layouts when
                    align-items: baseline
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: caleb at chearon.net
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 393981

  --> https://bugs.webkit.org/attachment.cgi?id=393981&action=review

Safari grid as flex item with baseline can have wrong column widths

TL;DR: https://jsfiddle.net/e6fxnoac/1/

I have finally been able to isolate this grid layout bug in WebKit that has now bitten us 3 different times in our web application. It goes back several Safari versions.

Firefox and Chrome do not have this problem so it's easy to forget and have websites look bad in Safari.

The bug is that the column widths are wrong (too narrow). What causes it:

1. The grid is a flex item
2. The outer flexbox flows in the block direction (flex-flow: column)
3. The grid specifies align-items: baseline;
4. The element is appended to the DOM in Javascript rather than loaded from the initial document

Could be related to Bug #199648

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200319/1bcbfb59/attachment.htm>