Hi, Since Safari 16.4 (both on mobile and desktop) an important regression has been caused to CSS grid which broke thousands of our themes using it. I have been able to set up a minimal reproduction step here: https://codepen.io/bakura10/pen/PodgbzN The rendering is correct on Chrome, Firefox and Safari 16.3 and lower. I have been able to solve it by changing 1fr to minmax(0, 1fr) on the content-over-media component, but obviously this regression is causing issues to the thousands of existing installs of the theme :(. Thanks
Hi Mic, Thanks for the test case. This should help to investigate.
Created attachment 465652 [details] rendering in safari, firefox, chrome In the case of Safari the content is stretched.
This is the `min-height: 100%` on the image which affects the layout in Safari but doesn't in Firefox and Chrome. deactivating `min-height: 100%` on `.content-over-media img` gives the proper size.
Created attachment 465653 [details] testcase After running a regression testing, the commit which is responsible for this regression is: https://github.com/WebKit/WebKit/compare/48fe5d10f6d2a56957f07a669bdb9aa8627c5aff...93e6542aebf91d6a023247a5068e8756eeae53d3 which was to fix another regression Bug 251419 and Bug 252425 which had been caused by 247507
<rdar://problem/107354658>
Thanks for bringing this to me attention everyone. After looking into this it seems like the underlying issue was the same as reported in: https://bugs.webkit.org/show_bug.cgi?id=254603 With that patch both issues should be addressed. *** This bug has been marked as a duplicate of bug 254603 ***
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/39287