Bug 286619

Summary: Mix blend mode of a child of a positioned element over video does not blend.
Product: WebKit Reporter: Tom Bigelajzen <tombigel>
Component: CompositingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: jer.noble, koivisto, maggotfish, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 18   
Hardware: All   
OS: All   
Attachments:
Description Flags
demo of this bug in action, on the left text with blend over and image, on the right text with blend over a video
none
screenshot of all 3 major browsers side by side where the bug is apparent only in safari none

Tom Bigelajzen
Reported 2025-01-28 06:24:13 PST
Created attachment 474041 [details] demo of this bug in action, on the left text with blend over and image, on the right text with blend over a video When applying "mix-blend-mode" on an element and placing this element in a positioned (relative, absolute) parent, the blend mode does not always work as expected as in other browsers. When a video (My guess is that it will happen also for other composites) is placed under the positioned container the container becomes isolated and the blend mode does not apply to video or any other element under it. For "normal" elements like image etc. the blend mode does apply. For non-positioned parents the blend mode applies to the video. This behavior differs from Chrome and Firefox where the blend mode is applied over videos inside a positioned parent. Recreated on any Safari (including preview) on any Apple OS. See attachments for demo and screenshots
Attachments
demo of this bug in action, on the left text with blend over and image, on the right text with blend over a video (1.64 KB, text/html)
2025-01-28 06:24 PST, Tom Bigelajzen
no flags
screenshot of all 3 major browsers side by side where the bug is apparent only in safari (488.60 KB, image/png)
2025-01-28 06:26 PST, Tom Bigelajzen
no flags
Tom Bigelajzen
Comment 1 2025-01-28 06:26:17 PST
Created attachment 474042 [details] screenshot of all 3 major browsers side by side where the bug is apparent only in safari
Yehonatan Daniv
Comment 2 2025-01-28 07:18:34 PST
It behaves as if, specifically over a video, a new stacking context is created for `position: relative`, regardless of `z-index` being `auto`. This is breaking a common design feature for us (Wix).
Radar WebKit Bug Importer
Comment 3 2025-02-04 06:25:13 PST
Note You need to log in before you can comment on or make changes to this bug.