[Webkit-unassigned] [Bug 226522] New: Layout bug with nested grid inside flex

[bugzilla-daemon at webkit.org]

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

            Bug ID: 226522
           Summary: Layout bug with nested grid inside flex
           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: tomc at caurea.org
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

https://dor1x.csb.app

The image should be aligned to the top left of the viewbox, but is shifted slightly down in Safari 14 / Safari technology preview. Works in Chrome and Firefox..

Curiously, when I highlight the .box element in the devtools, the highlight shows up in the correct location. But the element appears to be actually rendered in a different place.

---

<style>
  img {
    display: block;
    width: 100%;
    flex-grow: 1;
  }

  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .box {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    max-width: 20rem;
  }
</style>

<div class="container">
  <div class="box">
    <img src="https://media.giphy.com/media/hR6Q01jCXOr31wctJw/giphy.gif" />
  </div>
</div>

-- 
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/20210602/4fbd3032/attachment-0001.htm>