1186039 - mix-blend-mode acts strangely in text + photo example

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[Bill Walker [:bwalker] [@wfwalker]]

STR:

See http://codepen.io/tevko/pen/mJGJNM

Expected: letters reveal photo underneath (as with Chrome, Safari)

Actual: letters are black; resizing the window causes flashing and jank.

Comment 1

[Bill Walker [:bwalker] [@wfwalker]]

The HTML:

<h1> LOOK AT HOW COOL THIS IS</h1>

The CSS:

html {
	background-image: url('http://i.huffpost.com/gen/1164733/images/o-PHOTOS-OF-SLOTHS-facebook.jpg');
	background-size: cover;
	width: 100%;
	height: 200vh;
}


h1 {
	background-color: white;
	position: fixed;
	padding: 20px;
	font-size: 5em;
	margin: 0 auto;
	mix-blend-mode: screen; //this is the magic
	top: 60px;
}

Comment 2

[Lee Salzman [:lsalzman]]

At least when I test here with a Linux nightly, I observe none of the reported issues - letters are transparent and no jank. Can you give more information on what platform you're using (i.e. graphics section from about:support) and Firefox version?

Comment 3

[Dan Williams]

This is still present mac osx FF var 40.0.2

Issue goes away if you disable hardware acceleration in preferences

Comment 4

[Gregory Pappas [:gregp]]

Attachment: reduced.html

Comment 5

[Gregory Pappas [:gregp]]

Unable to reproduce in current versions.