[Webkit-unassigned] [Bug 229027] New: Incorrect grid population with shadow DOM and display: contents

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Thu Aug 12 00:54:30 PDT 2021


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

            Bug ID: 229027
           Summary: Incorrect grid population with shadow DOM and display:
                    contents
           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: jeroen.zwartepoorte at gmail.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 435398

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

Layout bug in action

So I've tried (and failed) to create a reproducible example here: https://codepen.io/jpzwarte/pen/ZEKwZmv 

What happens in Safari & STP is that with the given DOM structure of:

```
<my-container>
  <div class="wrapper">
    <h1>Title</h1>
    <p>Body</p>
    <button>Button</button>
  </div>
</my-container>
```

And with `my-container` having `display: grid; grid-template-rows: auto auto auto;`, Safari incorrectly puts the `<p>` on the first grid row.

It looks like a reflow fixes the issue.

The workaround here is to explicitly set `grid-row: 1` for the title and `grid-row: 3` for the button.

-- 
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/20210812/3f5892a7/attachment.htm>


More information about the webkit-unassigned mailing list