Bug 221964

Summary: https://maya.land/monologues page renders incorrectly (filter should create containing block for fixed)
Product: WebKit Reporter: Simon Fraser (smfr) <simon.fraser>
Component: Layout and RenderingAssignee: Simon Fraser (smfr) <simon.fraser>
Status: NEW ---    
Severity: Normal CC: ap, bfulgham, mattwoodrow, rniwa, simon.fraser, webkit-bug-importer, zalan, zlip.792
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
URL: https://maya.land/monologues/2021/02/15/css-dither.html
See Also: https://bugs.webkit.org/show_bug.cgi?id=242673
Attachments:
Description Flags
WIP none

Description Simon Fraser (smfr) 2021-02-16 08:46:37 PST
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.
Comment 1 Radar WebKit Bug Importer 2021-02-16 08:46:53 PST
<rdar://problem/74392818>
Comment 2 Simon Fraser (smfr) 2021-09-06 11:18:57 PDT
Fixing this may require making filtered layers a clipping root for painting (like transforms). Need to fix RenderLayer::updateLayerPositions() and accumulateOffsetTowardsAncestor() code.
Comment 3 Simon Fraser (smfr) 2021-09-06 11:22:01 PDT
Created attachment 437428 [details]
WIP
Comment 4 Ahmad Saleem 2022-06-11 03:56:34 PDT
I am still able to reproduce this bug in Safari 15.5 on macOS 12.4 and also on Safari Technology Preview 146. Thanks!