Bug 221964 - https://maya.land/monologues page renders incorrectly (filter should create containing block for fixed)
Summary: https://maya.land/monologues page renders incorrectly (filter should create c...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Simon Fraser (smfr)
URL: https://maya.land/monologues/2021/02/...
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-02-16 08:46 PST by Simon Fraser (smfr)
Modified: 2022-06-11 03:56 PDT (History)
8 users (show)

See Also:


Attachments
WIP (8.00 KB, patch)
2021-09-06 11:22 PDT, Simon Fraser (smfr)
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
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!