Bug 221341 – Video element doesn't respect width: 100%, also changes on window resize despite not being affected

• Component: Layout and Rendering
• Status: NEW

Created attachment 419152 [details]
Video fails to adapt to parent width

Tested a simple scenario: fixed width (in pixels) <div> containing a "width: 100%" <video> whose height is allowed to adapt freely (according to the video's aspect ratio).

However, the video element didn't fully span the parent element width and rendered bars on the sides (that have video background color).


In a related scenario. The parent <div> had both fixed width and height and the child <video> had its width and height both set to "100%". In this case, if the video's aspect ratio doesn't exactly match the parents it is epxected that we will see some video background that fills the remaining space.

This is what happened at first after the page loaded. However, after resizing the window (which should have no effect on the elements as they have fixed size) the video suddenly resized and revealed the background of the parent.


I've attached full HTML examples and screenshots. Most visible on Retina (tried two retina MacBook Pros), but similar unexplained subpixel values were visible on a non-retina external display (also the color change on window resize was faint, but visible).

Created attachment 419153 [details]
Video element size changes on window resize, should not change

Created attachment 419154 [details]
Screenshot of video-safari.html on different browsers

Created attachment 419156 [details]
Screenshot of video-safari-2.html after window resized

[Radar WebKit Bug Importer]

<rdar://problem/74194012>

[Smoley]

Thanks for filing, I'm able to reproduce this on Safari 13.1.3 and TOT.