Bug 254641 – REGRESSION (Safari 16.4): images with min-height: 100% stretch the grid to the full height of the viewport

• Component: CSS
• Status: RESOLVED DUPLICATE

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

[Karl Dubost]

Hi Mic, Thanks for the test case.
This should help to investigate.

[Karl Dubost]

Created attachment 465652 [details]
rendering in safari, firefox, chrome

In the case of Safari the content is stretched.

[Karl Dubost]

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.

[Karl Dubost]

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

[Radar WebKit Bug Importer]

<rdar://problem/107354658>

[Sammy Gill]

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 ***

[Sammy Gill]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/39287