Bug 221341 - Video element doesn't respect width: 100%, also changes on window resize despite not being affected
Summary: Video element doesn't respect width: 100%, also changes on window resize desp...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-02-03 10:15 PST by naktinis
Modified: 2021-02-15 19:09 PST (History)
7 users (show)

See Also:


Attachments
Video fails to adapt to parent width (483 bytes, text/html)
2021-02-03 10:15 PST, naktinis
no flags Details
Video element size changes on window resize, should not change (541 bytes, text/html)
2021-02-03 10:21 PST, naktinis
no flags Details
Screenshot of video-safari.html on different browsers (167.25 KB, image/jpeg)
2021-02-03 10:27 PST, naktinis
no flags Details
Screenshot of video-safari-2.html after window resized (110.71 KB, image/jpeg)
2021-02-03 10:31 PST, naktinis
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description naktinis 2021-02-03 10:15:42 PST
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).
Comment 1 naktinis 2021-02-03 10:21:24 PST
Created attachment 419153 [details]
Video element size changes on window resize, should not change
Comment 2 naktinis 2021-02-03 10:27:43 PST
Created attachment 419154 [details]
Screenshot of video-safari.html on different browsers
Comment 3 naktinis 2021-02-03 10:31:33 PST
Created attachment 419156 [details]
Screenshot of video-safari-2.html after window resized
Comment 4 Radar WebKit Bug Importer 2021-02-10 10:16:13 PST
<rdar://problem/74194012>
Comment 5 Smoley 2021-02-15 19:09:43 PST
Thanks for filing, I'm able to reproduce this on Safari 13.1.3 and TOT.