Bug 200381

Summary:

Reference clip-path doesn't work on <video> element

Product:

WebKit

Reporter:

Xidorn Quan <xidorn-webkit>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

ahmad.saleem792, bfulgham, eric.carlson, jer.noble, simon.fraser, webkit-bug-importer, yegor.jbanov, zalan

Priority:

Keywords:

BrowserCompat, CanvaBug, InRadar

Version:

Safari Technology Preview

Hardware:

Unspecified

OS:

Unspecified

Bug Depends on:

Bug Blocks:

126207

Attachments:

Description	Flags
testcase	none

Xidorn Quan

Reported 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.

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

Radar WebKit Bug Importer

Comment 1 2019-08-02 13:30:18 PDT

<rdar://problem/53876983>

Simon Fraser (smfr)

Comment 2 2019-08-02 15:23:43 PDT

Huh I thought I made this work.

Simon Fraser (smfr)

Comment 3 2019-08-02 15:24:30 PDT

Oh, I don't think we support the reference syntax.

Xidorn Quan

Comment 4 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>.

Xidorn Quan

Comment 5 2019-08-02 15:46:21 PDT

Oh, I see what you mean.

Simon Fraser (smfr)

Comment 6 2019-08-02 16:07:13 PDT

The <div> one will be software-painted, the <video> one will be on GraphicsLayer.

Simon Fraser (smfr)

Comment 7 2022-08-15 10:50:03 PDT

The video referenced by the testcase no longer exists, so the testcase is not valid.

Yegor

Comment 8 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.

Ahmad Saleem

Comment 9 2026-01-10 19:48:07 PST

@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?

Ahmad Saleem

Comment 10 2026-01-10 19:50:14 PST

Test Case with updated URL for video (bunny) - https://jsfiddle.net/9h74comt/

Note You need to log in before you can comment on or make changes to this bug.