Bug 250828 - mix-blend-mode stop working on a fixed layer if resolution is too large
Summary: mix-blend-mode stop working on a fixed layer if resolution is too large
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 16
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-01-19 02:12 PST by Roland
Modified: 2023-12-15 08:46 PST (History)
3 users (show)

See Also:

Attachments
video capture of the bug (7.06 MB, video/quicktime)
2023-01-19 02:12 PST, Roland 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Roland 2023-01-19 02:12:14 PST 
Created attachment 464554 [details]
video capture of the bug

Hello,
this bug happen on the last Safari (tested on ipad pro M1, macbook pro 2013 and mac mini 2018).

This codepen show the bug happening : https://codepen.io/danoszz/pen/QWLKKOe (scroll to the red and enlarge your windows more than 1800 px)

Any mix-blend-mode attached to a fixed or sticky element will stop working if the size of the window scale to much.
Generally around 1800px wide.

You need to reload the windows to get the blend working back.

If the element position is static or relative, it's ok.
Comment 1 Roland 2023-01-19 02:20:57 PST 
Another exemple : https://postcompany.co/
Comment 2 Radar WebKit Bug Importer 2023-01-26 02:13:20 PST 
<rdar://problem/104686540>
Comment 3 Roland 2023-12-15 08:46:16 PST 
Still an issue on Safari 17.1 and Sonoma.