Bug 270334 - popover display:grid row minmax(0, 1fr) height inconsistent with Chromium/Firefox
Summary: popover display:grid row minmax(0, 1fr) height inconsistent with Chromium/Fir...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 14
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2024-02-29 23:04 PST by account+webkit-bugzilla@boermans.name
Modified: 2024-09-14 08:07 PDT (History)
8 users (show)

See Also:

Attachments
Screenshot of safari alongside chrome (639.58 KB, image/png)
2024-02-29 23:04 PST, account+webkit-bugzilla@boermans.name 		no flags Details
rendering in safari, firefox, chrome (403.91 KB, image/png)
2024-03-05 21:22 PST, Karl Dubost 		no flags Details
testcase (388 bytes, text/html)
2024-03-06 23:12 PST, Karl Dubost 		no flags Details
rendering in safari, firefox, chrome (141.28 KB, image/png)
2024-03-06 23:13 PST, Karl Dubost 		no flags Details
Testcase (276 bytes, text/html)
2024-03-07 11:19 PST, Sammy Gill 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description account+webkit-bugzilla@boermans.name 2024-02-29 23:04:02 PST 
Created attachment 470109 [details]
Screenshot of safari alongside chrome

In Chrome, Edge, and Firefox(with popover flag checked) the opened popover displays centered vertically – fitting the height of the text content as intended.

In Safari the height of the popover fills the viewport vertically.

Test page: https://tropical-bustling-utahraptor.glitch.me/

The specific use case that motivates applying grid to the popover is to overflow the child .scroll-pane instead of the parent popover element.
Comment 1 Karl Dubost 2024-03-05 21:22:02 PST 
Created attachment 470197 [details]
rendering in safari, firefox, chrome

Safari Technology Preview  189           19619.1.3.2
Firefox Nightly            125.0a1       12524.3.5
Google Chrome Canary       124.0.6338.0  6338.0
Comment 2 Radar WebKit Bug Importer 2024-03-05 21:22:54 PST 
<rdar://problem/124117215>
Comment 3 Karl Dubost 2024-03-06 23:12:55 PST 
Created attachment 470225 [details]
testcase

A minimal testcase
Comment 4 Karl Dubost 2024-03-06 23:13:37 PST 
Created attachment 470226 [details]
rendering in safari, firefox, chrome

Rendering of the minimal test case in the 3 browsers.
Comment 5 Karl Dubost 2024-03-06 23:22:00 PST 
The CSS for popover is defined in https://searchfox.org/wubkat/source/Source/WebCore/css/popover.css
Comment 6 Sammy Gill 2024-03-07 11:19:29 PST 
Created attachment 470229 [details]
Testcase

Further reduced test case with the style from popover that recreates the bug. Looks like it is due to the position: fixed and height: min-content on the grid.
Comment 7 Derek Gray 2024-09-14 08:07:10 PDT 
That confirms this issue is not specific to popover, nice to know.

Apparent workaround is setting "height: auto".