Bug 278813

Summary: Blend modes in Safari are lost when zooming in
Product: WebKit Reporter: Yitzchok Sabel <yitzchok>
Component: CompositingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Minor CC: bfulgham, graouts, graouts, mordechai112, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 17   
Hardware: All   
OS: All   
Attachments:
Description Flags
Example with screen blend mode
none
Test case none

Yitzchok Sabel
Reported 2024-08-28 13:52:51 PDT
Blend Mode Issue in WebKit When using supported blend modes (e.g., `multiply`, `screen`, etc.) in Safari, zooming in causes the browser to forget the blend mode effect and display the element with its regular color. Zooming out does not restore the blend mode effect; only reloading the page does. Steps to Reproduce 1. Create an HTML element with a blend mode applied using CSS. 2. Open the HTML file in Safari. 3. Zoom in using Safari's zoom feature (pinching on trackpad). Example Code ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blend Mode Bug</title> <style> .blend-mode { width: 200px; height: 200px; background-color: red; mix-blend-mode: overlay; } .background { width: 200px; height: 200px; background-color: blue; position: absolute; top: 0; left: 0; } </style> </head> <body> <div class="background"></div> <div class="blend-mode"></div> </body> </html>
Attachments
Example with screen blend mode (678 bytes, text/html)
2024-08-29 11:33 PDT, Simon Fraser (smfr) 		no flags
Details
Test case (634 bytes, text/html)
2024-09-03 11:20 PDT, Simon Fraser (smfr) 		no flags
Details
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2024-08-29 00:28:49 PDT
<rdar://problem/134918699>
Simon Fraser (smfr)
Comment 2 2024-08-29 11:33:14 PDT
Created attachment 472349 [details] Example with screen blend mode I can't reproduce this. Your example, with `overlay`, doesn't actually look different when the blend mode is removed. I attach an example using `screen`, and zooming does not break it for me.
Yitzchok Sabel
Comment 3 2024-08-29 11:40:15 PDT
Try this https://vercel.com/d7mtgs-projects/d7mtg/CrEbNcLr1bADgZLPUoviuuA4r7pA 1. Click and hold the 'use' button 2. Observe that the overlay works 3. Zoom using a Apple magic trackpad 4. Press the button again
Simon Fraser (smfr)
Comment 4 2024-08-29 11:51:10 PDT
Do you have an example that's not behind a log-in?
Yitzchok Sabel
Comment 5 2024-09-02 10:50:06 PDT
I've found that the only way this bug happens is if: 1 Use background-image and not solid color 2 the position of overlay has to be position fixed with inset 0 See code below <html lang="en"> <head> <title>Blend Mode Bug</title> <style> .overlay { background-image: radial-gradient( circle, red 0%, red 80%, transparent 80% ); mix-blend-mode: screen; position: fixed; inset: 0; pointer-events: none; } .background { width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="background"></div> <div class="overlay"></div> </body> </html>
Simon Fraser (smfr)
Comment 6 2024-09-03 11:20:59 PDT
Created attachment 472424 [details] Test case Thank you, I can reproduce with that test case.
Simon Fraser (smfr)
Comment 7 2024-09-03 11:21:28 PDT
This is about the overlay layer becoming tiled.
Simon Fraser (smfr)
Comment 8 2024-09-23 17:30:52 PDT
*** This bug has been marked as a duplicate of bug 250828 ***
Note You need to log in before you can comment on or make changes to this bug.