Site Editor: Duotone filter doesn't work on mobile

[mdtanjid0]

Quick summary

The duotone filter doesn't work on mobile, though it works fine on the desktop version.

It also functions correctly with the Preview tool and browser development tools, but it doesn't work when checked on a real device.

I have tested it so far with an iPhone and Chrome Browser on a couple of themes (StartFit and Allez), but the result is the same.

Steps to reproduce

1. Take a Cover Block.
2. Add a video to the block.
3. Apply a duotone filter to it.
4. Check on the Desktop version.
5. Also, check with real devices, especially with an iPhone.

What you expected to happen

It should behave on all of the devices same.

What actually happened

It doesn't appear the same as the desktop.

Desktop Version:

Mobile Version:

Impact

One

Available workarounds?

Yes, difficult to implement

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

I checked on both (simple and Atomic); the user site is an AT site, and mine is simple.

Contex:

• [ ] 7636157-zen (needs to be followed up )

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 7636157-zen

[cat-og]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated with video on Simple and Atomic
• On an Atomic site with AMP active, the duotone on the cover block also did not apply to a still image, but worked as expected after exiting mobile view.

📌 ACTIONS

• Triaged

[annezazu]

Hey there. I tried to replicate this here: https://nomad.blog/testing-duotone/ Duotone appears correctly on desktop as you can see.

Here's a video of how it shows up correctly on mobile too using Safari on iOS:

https://github.com/user-attachments/assets/59264213-330a-4f22-860a-1d7f400bb6d3

I also found a Gutenberg GitHub issue on the same topic: https://github.com/WordPress/gutenberg/issues/53950

Can anyone replicate? @ajlende perhaps? If not, perhaps we can close both this and the Gutenberg issue out :)

[ajlende]

I can replicate it on desktop Safari Version 17.5 (19618.2.12.11.6). Unfortunately, I don't have an iPhone to test on mobile Safari. Seems to be fine on the latest versions of FF and Chrome on Android.

Safari has made a few changes in the past that broke SVG filters and then they've fixed them in later versions, so it's especially important to get the exact Safari version for these sort of things. Sometimes there's workarounds that I've been able to find, but sometimes you just have to wait for Safari to fix the rendering bug in their browser.

[ajlende]

It might be this new WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=246106.

Actually, maybe not if this was reported in Jan. Could still be https://bugs.webkit.org/show_bug.cgi?id=184601 which doesn't have any workarounds for duotone-type filters.

[ajlende]

From the Webkit bug report:

The issue here is that WebKit doesn't support references to SVG filters when doing "accelerated" filters. This is a shame, since there's no way to do a color matrix via a CSS filter.

There are two filter codepaths; one for static content, and another if we call into the compositing ("accelerated") code path. The url(#foobar) stuff doesn't work in the second case.

Since it's an entirely different code path for all non-static content. It's unlikely that a workaround exists. I tried a bunch of different ways of applying filters in this codepen just in case, but nothing worked.

Best we can do is ask Apple if they can prioritize https://bugs.webkit.org/show_bug.cgi?id=184601 as I'm fairly certain that's the correct bug.