Bug 244697

Summary: `aspect-ratio` inside flex container with fixed height and border overflows container
Product: WebKit Reporter: Benoît Rouleau <benoit.rouleau>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: 709922234, bfulgham, cathiechen, karlcow, sgill26, simon.fraser, webkit-bug-importer, webkit-layout-noreply, webkit, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 15   
Hardware: All   
OS: All   
See Also: https://bugs.webkit.org/show_bug.cgi?id=267625
https://bugs.webkit.org/show_bug.cgi?id=272527
Attachments:
Description Flags
HTML file showcasing the issue
none
rendering in Safari, Safari TP, firefox, chrome none

Description Benoît Rouleau 2022-09-01 18:18:16 PDT
Created attachment 462083 [details]
HTML file showcasing the issue

Compare the attached HTML file in different browsers. Safari is the only one that renders the red square over the black border.
Comment 1 Radar WebKit Bug Importer 2022-09-01 23:18:50 PDT
<rdar://problem/99475341>
Comment 2 Karl Dubost 2022-09-01 23:24:37 PDT
Created attachment 462087 [details]
rendering in Safari, Safari TP, firefox, chrome

Tested on macOS 13.0
---
Safari                     16.1          18614.2.1.1.1
Safari Technology Preview  16.0          18615.1.2.3
Firefox Nightly            106.0a1       10622.8.31
Google Chrome Canary       107.0.5275.0  5275.0


the div doesn't have a 1:1 ratio but a 1:2 ratio.