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.
<rdar://problem/74392818>
Fixing this may require making filtered layers a clipping root for painting (like transforms). Need to fix RenderLayer::updateLayerPositions() and accumulateOffsetTowardsAncestor() code.
Created attachment 437428 [details] WIP
I am still able to reproduce this bug in Safari 15.5 on macOS 12.4 and also on Safari Technology Preview 146. Thanks!