Bug 261556 - Element with `height: 100%` has incorrect height inside container that uses aspect-ratio and max-width
Summary: Element with `height: 100%` has incorrect height inside container that uses a...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 16
Hardware: Mac (Apple Silicon) macOS 13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-09-14 08:09 PDT by Oliver Joseph Ash
Modified: 2023-10-29 16:31 PDT (History)
7 users (show)

See Also:

Attachments
Screenshot (43.96 KB, image/png)
2023-09-14 08:09 PDT, Oliver Joseph Ash 		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 Oliver Joseph Ash 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>

```
Comment 1 Radar WebKit Bug Importer 2023-09-14 18:57:38 PDT 
<rdar://problem/115531554>
Comment 2 Ahmad Saleem 2023-09-19 17:10:40 PDT 
Reproducible in Safari Technology Preview 178 as well.
Comment 3 wesley luyten 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