https://maya.land/monologues page renders incorrectly (filter should create containing block for fixed)

• Component: Layout and Rendering
• Status: NEW ---

[Simon Fraser (smfr)]

This page has the dither elements covering the whole page:

https://maya.land/monologues/2021/02/15/css-dither.html

The content has:

<div style="width: 300px;                                                                                                                                   
    height: 400px; 
image-rendering: smooth;                                                                                                                                 
    filter: saturate(0) contrast(250); "><picture><img alt="really imperious looking selfie where i have super good hair, dithered" src="/assets/content/selfie.jpg" style="height:400px"></picture>
<div style="width: 100%;                                                                                                                                        
    height: 100%;                                                                                                                                       
    pointer-events: none;                                                                                                                                       
    position: fixed;                                                                                                                                    
    display: block;                                                                                                                                     
    z-index: 2;                                                                                                                                         
    top:0px;
    left: 0px;                                                                                                                                 
    background-image: url(https://maya.land/assets/bluenoise.png);                                                                                      
    background-repeat: repeat;"></div>
</div>
and is relying on the fact that in other browsers, filter: creates a containing block for position:fixed.

[Radar WebKit Bug Importer]

<rdar://problem/74392818>

[Simon Fraser (smfr)]

Fixing this may require making filtered layers a clipping root for painting (like transforms). Need to fix RenderLayer::updateLayerPositions() and accumulateOffsetTowardsAncestor() code.

[Simon Fraser (smfr)]

Created attachment 437428 [details]
WIP

[Ahmad Saleem]

I am still able to reproduce this bug in Safari 15.5 on macOS 12.4 and also on Safari Technology Preview 146. Thanks!