1408230 - mix-blend-mode not work correctly when z-index is applied to a parent div

Status: NEW

(Core :: Layout, defect, P3)

Description

[Asif Youssuff]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20171012105833

Steps to reproduce:

As seen on reddit: https://www.reddit.com/r/firefox/comments/75yof5/does_mixblendmode_not_work_on_deeply_nested/

Visit: http://jsbin.com/keqeceseca/2/edit?html,css,output



Actual results:

	<div class="wrapper">
		<div class="demo wrapped"></div>
	</div>

div is displayed with a black background.


Expected results:

div should have the same background color specified in html background color, especially since there is no overlap of divs.

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Attachment: reporter's testcase

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I'd need to read the spec pretty carefully to understand what's supposed to happen here.

Comment 3

[Darkspirit]

Attachment: Screenshot_20171021_024107.png

(In reply to David Baron :dbaron: ⌚️UTC-7 from comment #1)
> Created attachment 8918068 [details]
> reporter's testcase

Konqueror 4.14.25 @ Debian Testing:      blue body bg, both images have a white bg and black lines
Chromium 61.0.3163.100 @ Debian Testing: blue body bg, both images a black bg and white lines
firefox-esr 52.4.0 ESR @ Debian Testing: blue body bg, left image: white on blue + right image white in black
Nightly 20171020100426 @ Debian Testing: blue body bg, left image: white on blue + right image white in black