200381 2019-08-01 22:00:26 -0700 Reference clip-path doesn't work on <video> element 2026-01-10 19:50:14 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari Technology Preview Unspecified Unspecified NEW BrowserCompat, CanvaBug, InRadar P2 Normal --- 126207 1 xidorn-webkit webkit-unassigned ahmad.saleem792 bfulgham eric.carlson jer.noble simon.fraser webkit-bug-importer yegor.jbanov zalan oldest_to_newest 1557878 0 375394 xidorn-webkit 2019-08-01 22:00:26 -0700 Created attachment 375394 testcase See the attached testcase, the <video> element is not shown. This works as expected on Firefox and Chrome. 1558088 1 webkit-bug-importer 2019-08-02 13:30:18 -0700 <rdar://problem/53876983> 1558162 2 simon.fraser 2019-08-02 15:23:43 -0700 Huh I thought I made this work. 1558164 3 simon.fraser 2019-08-02 15:24:30 -0700 Oh, I don't think we support the reference syntax. 1558178 4 xidorn-webkit 2019-08-02 15:45:07 -0700 There are two elements in the testcase both using the same syntax for clip-path. It works on the <div> but not the <video>. 1558179 5 xidorn-webkit 2019-08-02 15:46:21 -0700 Oh, I see what you mean. 1558195 6 simon.fraser 2019-08-02 16:07:13 -0700 The <div> one will be software-painted, the <video> one will be on GraphicsLayer. 1891376 7 simon.fraser 2022-08-15 10:50:03 -0700 The video referenced by the testcase no longer exists, so the testcase is not valid. 1896555 8 yegor.jbanov 2022-09-06 13:57:52 -0700 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. 2170972 9 ahmad.saleem792 2026-01-10 19:48:07 -0800 @Yegor & @Xidorn - is it reproducing for you? I am unable to reproduce from both test cases (Comment 0 & Comment 8) on Safari Technology Preview 234, can you try it once more? 2170973 10 ahmad.saleem792 2026-01-10 19:50:14 -0800 Test Case with updated URL for video (bunny) - https://jsfiddle.net/9h74comt/ 375394 2019-08-01 22:00:26 -0700 2019-08-01 22:00:26 -0700 testcase clip-path-video.html text/html 554 xidorn-webkit PCFET0NUWVBFIGh0bWw+CjxzdHlsZT4KdmlkZW8geyBvYmplY3QtZml0OiBmaWxsOyB9CnZpZGVv LCAjcmVmIHsKICB3aWR0aDogMzAwcHg7IGhlaWdodDogMzAwcHg7CiAgYmFja2dyb3VuZDogZ3Jl ZW47CiAgLXdlYmtpdC1jbGlwLXBhdGg6IHVybCgjYSk7CiAgY2xpcC1wYXRoOiB1cmwoI2EpOwp9 Cjwvc3R5bGU+Cjx2aWRlbyBjcm9zc29yaWdpbj0iYW5vbnltb3VzIiB3aWR0aD0iMzAwIiBoZWln aHQ9IjMwMCI+CiAgPHNvdXJjZSBzcmM9Imh0dHBzOi8vZ2lzdC5naXRodWJ1c2VyY29udGVudC5j b20vd2VteXNzLzdkMTQxZWQyMzhiYTE0ZTA1M2EyNmRmMzNlNjQ5N2EzL3Jhdy85ZGJiZGRiZTRj YWIyMDU2NmZkNTZjZTA2YjAxYzFlNmIzZjg5NTk5L3NjYXRjcm93Lm1wNCI+CjwvdmlkZW8+Cjxk aXYgaWQ9InJlZiI+PC9kaXY+Cjxzdmcgdmlld0JveD0iMCAwIDMwMCAzMDAiPgogIDxkZWZzPgog ICAgPGNsaXBQYXRoIGlkPSJhIj4KICAgICAgPHBhdGggZD0iTSAxNTAgMCBMIDMwMCAzMDAgTCAw IDMwMCIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+Cjwvc3ZnPgo=