Bug 182278 – Disappearing element with mix-blend-mode + backface-visibility: hidden + position: fixed + overflow: auto + hardware acceleration

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: Layout and Rendering

[Darryl Yeo]

I found an odd combination of CSS properties that causes a hardware-accelerated element to disappear if it is nested in two fixed containers and is preceded by an element with mix-blend-mode and backface-visibility. See reduced test case below or at https://codepen.io/darrylyeo/pen/gvONMG


HTML:

<div class="background"></div>
<div class="modal">
	<div class="modal-inner">
		<div class="modal-content">Hello world! Can you see me?</div>
	</div>
</div>


CSS:

.background {
	mix-blend-mode: multiply; /* or any other mix-blend-mode */
	backface-visibility: hidden;
}
.modal {
	position: fixed;
	overflow: auto; /* or anything other than overflow: visible; */
}
.modal-inner {
	position: fixed; /* or position: absolute; */
}
.modal-content {
	transform: translateZ(0); /* or will-change: transform; */
}


This seems to occur as long as .background precedes .modal-content in the tree, regardless of whether .background is nested inside of other elements or even moved into .modal or .modal-inner.

[Radar WebKit Bug Importer]

<rdar://problem/37034806>

[Simon Fraser (smfr)]

I can't reproduce this. The second line of text appears fine.