[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