Bug 251379 - CSS Border-Radius on Container of Video does not properly clip
Summary: CSS Border-Radius on Container of Video does not properly clip
Status: REOPENED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Compositing (show other bugs)
Version: Safari Technology Preview
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-01-30 12:15 PST by Jemaleddin Cole
Modified: 2023-01-31 09:53 PST (History)
4 users (show)

See Also:


Attachments
A file with two video tags, one that properly uses border radius and one that does not (343 bytes, text/html)
2023-01-30 12:15 PST, Jemaleddin Cole
no flags Details
safari, firefox, chrome (279.40 KB, image/png)
2023-01-30 22:04 PST, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Jemaleddin Cole 2023-01-30 12:15:13 PST
Created attachment 464757 [details]
A file with two video tags, one that properly uses border radius and one that does not

Wrapping a video tag in a container and applying a border-radius to it does not clip the video, but applying the same class directly to the video works. The video in the attached file does not work, but still demonstrates the problem. I tested in recent production Mobile and Desktop Safari for Ventura 13.2 and iOS 16.2, as well as Safari Tech Preview on desktop. 

(Tried to get the most recent desktop Safari build to work, but after fighting sandboxing for 10 minutes I gave up. Apologies!)
Comment 1 Alexey Proskuryakov 2023-01-30 13:11:19 PST
Possibly a dupe of bug 159045, although it's a div not an iframe here.
Comment 2 Radar WebKit Bug Importer 2023-01-30 13:19:03 PST
<rdar://problem/104834209>
Comment 3 Karl Dubost 2023-01-30 22:04:12 PST
Created attachment 464776 [details]
safari, firefox, chrome

Note that it doesn't clip the video in any browsers.

So Probably expected behavior. 
And this bug is WORKSFORME or INVALID?
Comment 4 Jemaleddin Cole 2023-01-31 05:29:02 PST
My test may have been deficient - apologies. Please try this more complicated version which does render differently in Safari than Firefox or Chrome:

https://codepen.io/nhall/pen/qByMjQy
Comment 5 Simon Fraser (smfr) 2023-01-31 09:53:57 PST
There have been some fixes for border-radius clipping recently. Please test in Safari Tech Preview, where your test renders correctly for me in 162.