Bug 257325

Summary: Object with overflow hidden with canvases inside placed in flex container doesn't have right height
Product: WebKit Reporter: pawel.kaptur
Component: CanvasAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: dino, karlcow, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 16   
Hardware: Mac (Intel)   
OS: macOS 13   
Attachments:
Description Flags
video showing that element has no height when container has inline-flex none

Description pawel.kaptur 2023-05-25 06:14:41 PDT 
Created attachment 466496 [details]
video showing that element has no height when container has inline-flex

Description:
Problem is little bit complicated.
Our custom element is container for image. This custom element has overflow hidden.
We have two canvases inside. One is for maintaining width of element and second contain image (it has position absolute). And size of canvas with image is transferred from custom element as width and height 100%. 
And everything works ok expect when we want to place this custom element in container with display flex or inline-flex. In those cases element has height 0.
On the attachment added it can be seen and when we change container display option to block and go back to flex/inline-flex then it is working as expected. So it seems as a problem in calculating height on initialization. 

Same example works on Chrome 113.0.5672.126 and Firefox 113.0.2.

What steps will reproduce the problem?
(1) Please go to https://codesandbox.io/s/winter-http-3pp5kg
(2) There is no image 

What is the expected result?
Image container has height of canvas.

What happens instead?
Image container has height of 0.
Comment 1 Radar WebKit Bug Importer 2023-05-26 02:14:04 PDT 
<rdar://problem/109879208>