Bug 261556

Summary:

Element with `height: 100%` has incorrect height inside container that uses aspect-ratio and max-width

Product:

WebKit

Reporter:

Oliver Joseph Ash <oliverjash>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

ahmad.saleem792, bfulgham, luytenwesley, sgill26, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

See Also:

https://bugs.webkit.org/show_bug.cgi?id=246303

Attachments:

Description	Flags
Screenshot	none

Oliver Joseph Ash

Reported 2023-09-14 08:09:27 PDT

Created attachment 467680 [details] Screenshot https://jsbin.com/bitizawiji/1/edit?html,output ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>JS Bin</title> </head> <body> <div style="width: 300px"> <div style="aspect-ratio: 4000 / 6000; max-width: 100%; background: green" > <div style="border: 5px solid black; height: 100%"></div> </div> </div> </body> </html> ```

Attachments
Screenshot (43.96 KB, image/png) 2023-09-14 08:09 PDT, Oliver Joseph Ash	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Radar WebKit Bug Importer

Comment 1 2023-09-14 18:57:38 PDT

<rdar://problem/115531554>

Ahmad Saleem

Comment 2 2023-09-19 17:10:40 PDT

Reproducible in Safari Technology Preview 178 as well.

wesley luyten

Comment 3 2023-10-29 16:31:06 PDT

We're facing the same bug. Thanks for reporting! https://codesandbox.io/s/safari-aspect-ratio-height-bug-l363g6?file=/index.html

wesley luyten

Comment 4 2024-10-01 13:17:52 PDT

Could this be looked at in the future? It's causing our video player themes to have a 3ish px border at the bottom :( https://player-style-hy974ff6a-mux.vercel.app/ PR https://github.com/muxinc/player.style/issues/107

Note You need to log in before you can comment on or make changes to this bug.