[Webkit-unassigned] [Bug 260201] New: [css-contain] contain: inline-size breaks grid-template-rows: auto in Safari iOS 17

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Tue Aug 15 07:41:45 PDT 2023


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

            Bug ID: 260201
           Summary: [css-contain] contain: inline-size breaks
                    grid-template-rows: auto in Safari iOS 17
           Product: WebKit
           Version: Safari 17
          Hardware: iPhone / iPad
                OS: Unspecified
            Status: NEW
          Severity: Major
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: johannes.odland at nrk.no

Created attachment 467280

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

A screenshot of the bug.

Adding `contain: inline-size` collapses auto sized grid rows.

# How to reproduce: 

Add `contain: inline-size` to a grid element with grid-template-rows: auto;

A test-case is available here: https://johannesodland.github.io/browserbugs/2023/safari-contain-inline-size-grid-issue.html


```html
<section>
    <div>
        Lorem ipsum
    </div>
</section>
```

```css
section {
    box-sizing: border-box;
    display: grid;
    min-height: 100svh;
    grid-template-rows: auto;
    padding: 30px;
    contain: inline-size;
}

div {
    align-self: end;
}

```

# Expected result: 
Grid row height is unaffected. 
The text is placed in the bottom of the screen.

#Actual result
Grid row height collapses
The text is placed in the top of the screen.

-- 
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/20230815/4be3df82/attachment.htm>


More information about the webkit-unassigned mailing list