Bug 208201 - [css-grid] 1fr unit does not work vertically with fixed/absolute container
Summary: [css-grid] 1fr unit does not work vertically with fixed/absolute container
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 13
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-02-25 08:53 PST by Ashley Gullen
Modified: 2024-08-13 17:30 PDT (History)
8 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Ashley Gullen 2020-02-25 08:53:09 PST
In Safari, a CSS grid container with position fixed or absolute does not correctly handle the 1fr unit vertically.

Minimal repro: https://www.scirra.com/labs/bugs/safarigrid.html

The CSS grid container is positioned to fill the entire screen. It has four cells, with columns and rows 100px 1fr.

Expected result: entire screen to be green, since it is covered by the four cells.
Observed result: lower part of the screen is red (the CSS grid container), since it is not covered by the bottom two cells.

The 1fr unit fills the container horizontally, but not vertically. The lower two cells incorrectly compute a height of 0px.

It works correctly in Chrome, Firefox, and (legacy) Edge. It also seems works correctly in Safari with static or relative positioning on the container; only the fixed/absolute positioning is broken.
Comment 1 Radar WebKit Bug Importer 2020-02-26 09:50:22 PST
<rdar://problem/59809171>
Comment 2 Ahmad Saleem 2024-08-13 17:30:53 PDT
@Ashley - the link seems to be broken, by any chance, you have this link or test case for reference?