278813 2024-08-28 13:52:51 -0700 Blend modes in Safari are lost when zooming in 2024-09-23 17:30:52 -0700 1 1 1 Unclassified WebKit Compositing Safari 17 All All RESOLVED DUPLICATE 250828 InRadar P2 Minor --- 1 yitzchok webkit-unassigned bfulgham graouts graouts mordechai112 simon.fraser webkit-bug-importer zalan oldest_to_newest 2056056 0 yitzchok 2024-08-28 13:52:51 -0700 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> 2056208 1 webkit-bug-importer 2024-08-29 00:28:49 -0700 <rdar://problem/134918699> 2056330 2 472349 simon.fraser 2024-08-29 11:33:14 -0700 Created attachment 472349 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. 2056336 3 yitzchok 2024-08-29 11:40:15 -0700 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 2056337 4 simon.fraser 2024-08-29 11:51:10 -0700 Do you have an example that's not behind a log-in? 2057059 5 yitzchok 2024-09-02 10:50:06 -0700 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> 2057318 6 472424 simon.fraser 2024-09-03 11:20:59 -0700 Created attachment 472424 Test case Thank you, I can reproduce with that test case. 2057319 7 simon.fraser 2024-09-03 11:21:28 -0700 This is about the overlay layer becoming tiled. 2062561 8 simon.fraser 2024-09-23 17:30:52 -0700 *** This bug has been marked as a duplicate of bug 250828 *** 472349 2024-08-29 11:33:14 -0700 2024-09-03 11:20:59 -0700 Example with screen blend mode blend-mode-with-zoom.html text/html 678 simon.fraser PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0 PSJVVEYtOCI+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNl LXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgICA8dGl0bGU+QmxlbmQgTW9kZSBCdWc8L3Rp dGxlPgogICAgPHN0eWxlPgogICAgICAgIC5ibGVuZC1tb2RlIHsKICAgICAgICAgICAgbWFyZ2lu OiA1MHB4OwogICAgICAgICAgICB3aWR0aDogMjAwcHg7CiAgICAgICAgICAgIGhlaWdodDogMjAw cHg7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6IHJlZDsKICAgICAgICAgICAgbWl4LWJs ZW5kLW1vZGU6IHNjcmVlbjsKICAgICAgICB9CiAgICAgICAgLmJhY2tncm91bmQgewogICAgICAg ICAgICB3aWR0aDogMjAwcHg7CiAgICAgICAgICAgIGhlaWdodDogMjAwcHg7CiAgICAgICAgICAg IGJhY2tncm91bmQtY29sb3I6IGJsdWU7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsK ICAgICAgICAgICAgdG9wOiAwOwogICAgICAgICAgICBsZWZ0OiAwOwogICAgICAgIH0KICAgIDwv c3R5bGU+CjwvaGVhZD4KPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJiYWNrZ3JvdW5kIj48L2Rpdj4K ICAgIDxkaXYgY2xhc3M9ImJsZW5kLW1vZGUiPjwvZGl2Pgo8L2JvZHk+CjwvaHRtbD4K 472424 2024-09-03 11:20:59 -0700 2024-09-03 11:20:59 -0700 Test case blend-mode-screen-with-fixed.html text/html 634 simon.fraser PGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPHRpdGxlPkJsZW5kIE1vZGUgQnVnPC90aXRs ZT4KICAgIDxzdHlsZT4KICAgICAgLm92ZXJsYXkgewogICAgICAgIGJhY2tncm91bmQtaW1hZ2U6 IHJhZGlhbC1ncmFkaWVudCgKICAgICAgICAgIGNpcmNsZSwKICAgICAgICAgIHJlZCAwJSwKICAg ICAgICAgIHJlZCA4MCUsCiAgICAgICAgICB0cmFuc3BhcmVudCA4MCUKICAgICAgICApOwogICAg ICAgIHRleHQtYWxpZ246IGNlbnRlcjsKICAgICAgICBmb250LXNpemU6IDQycHQ7CiAgICAgICAg bWl4LWJsZW5kLW1vZGU6IHNjcmVlbjsKICAgICAgICBwb3NpdGlvbjogZml4ZWQ7CiAgICAgICAg aW5zZXQ6IDA7CiAgICAgICAgcG9pbnRlci1ldmVudHM6IG5vbmU7CiAgICAgIH0KICAgICAgLmJh Y2tncm91bmQgewogICAgICAgIHdpZHRoOiAyMDBweDsKICAgICAgICBoZWlnaHQ6IDIwMHB4Owog ICAgICAgIGJhY2tncm91bmQtY29sb3I6IGJsdWU7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9o ZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iYmFja2dyb3VuZCI+PC9kaXY+CiAgICA8ZGl2 IGNsYXNzPSJvdmVybGF5Ij5ab29tIGluIHRvIHNlZSB0aGUgYnVnPC9kaXY+CiAgPC9ib2R5Pgo8 L2h0bWw+Cg==