[Webkit-unassigned] [Bug 182278] New: Disappearing element with mix-blend-mode + backface-visibility: hidden + position: fixed + overflow: auto + hardware acceleration
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Mon Jan 29 22:02:39 PST 2018
https://bugs.webkit.org/show_bug.cgi?id=182278
Bug ID: 182278
Summary: Disappearing element with mix-blend-mode +
backface-visibility: hidden + position: fixed +
overflow: auto + hardware acceleration
Product: WebKit
Version: WebKit Nightly Build
Hardware: All
URL: https://codepen.io/darrylyeo/pen/gvONMG
OS: All
Status: NEW
Severity: Normal
Priority: P2
Component: Layout and Rendering
Assignee: webkit-unassigned at lists.webkit.org
Reporter: darryl at darryl-yeo.com
CC: bfulgham at webkit.org, simon.fraser at apple.com,
zalan at apple.com
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.
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180130/b0b0d455/attachment-0001.html>
More information about the webkit-unassigned
mailing list