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>
<rdar://problem/79056985>
This is not a safari-specific bug, I can reproduce it in GTK port using mini-browser.
This looks like a flexbox or grid layout issue, so not platform specific at all.
For some reason, the grid container calculates its height based on the page height. So the content is at the center of the page, rather than at the center of the parent container. Here's a more concise example: --- <div class="flex"> <div class="grid">Content</div> </div> <style> .flex { display: flex; flex-direction: column; } .grid { background: yellow; display: grid; grid-auto-flow: column; justify-content: center; align-items: center; height: 100%; } </style>
We have another case that could be related (same?). See example: https://jsbin.com/henosigusa/1/edit?html,css,output It's a structure of: flex > grid > flex. with a min-height on the outer flex. ------ <div class="flex min-height"> <div class="grid"> <div class="flex"> <div class="content">Hello1</div> <div class="content">Hello2</div> <div class="content">Hello3</div> <div class="content">Hello4</div> </div> </div> </div> <style> .grid { display: grid; } .flex { display: flex; flex-direction: column; } .flex > * { flex-grow: 1; } .min-height { min-height: 90px; } </style> ------ It appears that the min-height is affecting the content, and if the height of the content can't be contained inside the container, the min-height is applied to the .content items inside the inner flex. Seems to be WebKit only.