Bug 286619 – Mix blend mode of a child of a positioned element over video does not blend.

• Status: NEW
• Component: Compositing

[Tom Bigelajzen]

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

[Tom Bigelajzen]

Created attachment 474042 [details]
screenshot of all 3 major browsers side by side where the bug is apparent only in safari

[Yehonatan Daniv]

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]

<rdar://problem/144157713>