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

Attachments:

Description	Flags
Screenshot	none

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