Bug 246451 – Layout of nested grid with padding and aspect ratio fails

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Layout and Rendering

[Johannes Odland]

Created attachment 462956 [details]
Screenshot in Safari

Element in grid container with aspect-ratio, padding and align-content: end is placed outside grid if grid container is nested in another grid container.

I have replicated the bug in the following code pen: https://codepen.io/johannesodland/pen/xxjMgzr

```html
  <section>
    <div class="hero">
      <h2>Title</h2>
    </div>
  </section>

```

```css
:root {
  --_padding: 15px;
}

section {
  display: grid;
}

.hero {
  display: grid;
  background-color: silver;
  aspect-ratio: 16 / 9;
  padding: var(--_padding);
  align-content: end;
  justify-items: start;
}

h2 {
  margin: 0;
  padding: var(--_padding);
  background: mediumorchid;
}

```

Expected result: h2 is rendered inside padding at the bottom of the containing grid element.
This is correct in Chrome and Firefox.

Actual result: h2 is rendered 2 x padding below where it is expected, 1 x padding outside containing grid.


The bug also happens if the grid is inside a flex container, but not if its in a flow container.

[Johannes Odland]

Created attachment 462957 [details]
Screenshot in Chrome

[Karl Dubost]

Johannes, Thanks for the report.
Can you reproduce in STP 155?
https://developer.apple.com/safari/technology-preview/

It is working for me in STP 155.

[Johannes Odland]

It works fine in TP 155. My bad, I should have checked there first. 

Do you know when the next release is due?

[Radar WebKit Bug Importer]

<rdar://problem/101376382>