Bug 200381 - Reference clip-path doesn't work on <video> element
Summary: Reference clip-path doesn't work on <video> element
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, CanvaBug, InRadar
Depends on:
Blocks: 126207
  Show dependency tree / graph
 
Reported: 2019-08-01 22:00 PDT by Xidorn Quan
Modified: 2022-09-06 13:57 PDT (History)
7 users (show)

See Also:

Attachments
testcase (554 bytes, text/html)
2019-08-01 22:00 PDT, Xidorn Quan 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Xidorn Quan 2019-08-01 22:00:26 PDT 
Created attachment 375394 [details]
testcase

See the attached testcase, the <video> element is not shown.

This works as expected on Firefox and Chrome.
Comment 1 Radar WebKit Bug Importer 2019-08-02 13:30:18 PDT 
<rdar://problem/53876983>
Comment 2 Simon Fraser (smfr) 2019-08-02 15:23:43 PDT 
Huh I thought I made this work.
Comment 3 Simon Fraser (smfr) 2019-08-02 15:24:30 PDT 
Oh, I don't think we support the reference syntax.
Comment 4 Xidorn Quan 2019-08-02 15:45:07 PDT 
There are two elements in the testcase both using the same syntax for clip-path. It works on the <div> but not the <video>.
Comment 5 Xidorn Quan 2019-08-02 15:46:21 PDT 
Oh, I see what you mean.
Comment 6 Simon Fraser (smfr) 2019-08-02 16:07:13 PDT 
The <div> one will be software-painted, the <video> one will be on GraphicsLayer.
Comment 7 Simon Fraser (smfr) 2022-08-15 10:50:03 PDT 
The video referenced by the testcase no longer exists, so the testcase is not valid.
Comment 8 Yegor 2022-09-06 13:57:52 PDT 
Here's a fresh repro along with a workaround: https://jsfiddle.net/yjbanov/nh9jzLba/35/

Setting style.width and style.height to 100% fixes the issue. Remove the lines that set it and Safari will stop showing the video.