Bug 260499

Summary:

mpr.makedeb.org - nested flex with height 100% inside a display: grid is very tall

Product:

WebKit

Reporter:

Karl Dubost <karlcow>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

bfulgham, sgill26, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari 17

Hardware:

Unspecified

OS:

Unspecified

URL:

https://mpr.makedeb.org/

Attachments:

Description	Flags
simplified testcase	none
rendering in Safari, firefox, chrome	none

Description Karl Dubost 2023-08-21 17:50:31 PDT

This was initially reported on https://github.com/webcompat/web-bugs/issues/124825

Steps to reproduce:
1. With STP 177 on macOS
2. Go to https://mpr.makedeb.org/

Expected:
logo and navbar at the top

Actual:
logo and navbar are overlapping content in the middle of the page.

I need to reduce to make a test case.

A quick solution for the site to fix it is to remove the "height: 100%"

```
/* style.css | https://mpr.makedeb.org/static/css/style.css */

header .makedeb-brand {
  /* height: 100%; */
}
```

But still there is a difference of behavior here for Safari compared to Chrome and Firefox.

Comment 1 Radar WebKit Bug Importer 2023-08-21 17:50:41 PDT

<rdar://problem/114228144>

Comment 2 Karl Dubost 2023-08-21 18:16:13 PDT

Created attachment 467377 [details]
simplified testcase

This is kind of minimal.
Maybe there are a couple of things more to reduce.

Comment 3 Karl Dubost 2023-08-21 18:18:41 PDT

Created attachment 467378 [details]
rendering in Safari, firefox, chrome

Rendering in 

Safari Technology Preview  177           19617.1.4.3
Firefox Nightly            118.0a1       11823.8.19
Google Chrome Canary       118.0.5962.0  5962.0