Bug 254641

Summary:

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

Product:

WebKit

Reporter:

mic.gallego

Component:

CSS

Assignee:

Sammy Gill <sgill26>

Status:

RESOLVED DUPLICATE

Severity:

Major

CC:

karlcow, sgill26, webkit-bug-importer

Priority:

Keywords:

BrowserCompat, InRadar

Version:

WebKit Nightly Build

Hardware:

All

OS:

iOS 16

See Also:

https://bugs.webkit.org/show_bug.cgi?id=251419
https://github.com/web-platform-tests/wpt/pull/39287

Bug Depends on:

251419

Bug Blocks:

Attachments:

Description	Flags
rendering in safari, firefox, chrome	none
testcase	none

Description mic.gallego 2023-03-28 19:57:55 PDT

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

Comment 1 Karl Dubost 2023-03-28 22:35:10 PDT

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

Comment 2 Karl Dubost 2023-03-28 22:43:44 PDT

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

In the case of Safari the content is stretched.

Comment 3 Karl Dubost 2023-03-28 22:59:09 PDT

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.

Comment 4 Karl Dubost 2023-03-28 23:32:56 PDT

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

Comment 5 Radar WebKit Bug Importer 2023-03-28 23:34:17 PDT

<rdar://problem/107354658>

Comment 6 Sammy Gill 2023-03-30 10:57:54 PDT

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

Comment 7 Sammy Gill 2023-03-30 11:18:44 PDT

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