Duotone doesn't work with fixed background

[annezazu]

Description

The duotone filter resets and doesn't work if you select a fixed background for a Cover block.

Step-by-step reproduction instructions

1. Add a cover block
2. Set one of the duotone colors combinations
3. In the block settings, toggle on "Fixed Background" under Media Settings

Screenshots or screen recording (optional)

duetone.fixed.background.mov

Of note, I also was previously finding that duotone was crashing with the nightly build from May 8th.

duotone.mov

This was the resulting error but I can't replicate it with the nightly build from May 10th.

TypeError: e.forEach is not a function
at Ac (https://fseprogramtest.mystagingwebsite.com/wp-content/plugins/gutenberg-8/build/block-editor/index.js?ver=9a733d33825939b80f7f27e9708fe194:10:8195)
at WithDuotoneStyles(WithFontSizeInlineStyles((((Component))))) (https://fseprogramtest.mystagingwebsite.com/wp-content/plugins/gutenberg-8/build/block-editor/index.js?ver=9a733d33825939b80f7f27e9708fe194:10:10434)
at we (https://fseprogramtest.mystagingwebsite.com/wp-content/plugins/gutenberg-8/vendor/react-dom.min.de439aae.js:84:293)
at He (https://fseprogramtest.mystagingwebsite.com/wp-content/plugins/gutenberg-8/vendor/react-dom.min.de439aae.js:97:464)
at zj (https://fseprogramtest.mystagingwebsite.com/wp-content/plugins/gutenberg-8/vendor/react-dom.min.de439aae.js:228:406)
at Th (https://fseprogramtest.mystagingwebsite.com/wp-content/plugins/gutenberg-8/vendor/react-dom.min.de439aae.js:152:223)
at tj (https://fseprogramtest.mystagingwebsite.com/wp-content/plugins/gutenberg-8/vendor/react-dom.min.de439aae.js:152:152)
at Te (https://fseprogramtest.mystagingwebsite.com/wp-content/plugins/gutenberg-8/vendor/react-dom.min.de439aae.js:146:151)
at https://fseprogramtest.mystagingwebsite.com/wp-content/plugins/gutenberg-8/vendor/react-dom.min.de439aae.js:61:68
at unstable_runWithPriority (https://fseprogramtest.mystagingwebsite.com/wp-content/plugins/gutenberg-8/vendor/react.min.e713ea3b.js:25:260)

WordPress information

• WordPress version: 5.7.1
• Gutenberg version: v-10.7.0.20210510
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1 Blocks

Device information

• Device: Desktop
• Operating system: MacOS
• Browser: Chrome

[youknowriad]

cc @ajlende @jasmussen in case you have an idea about this.

[ajlende]

The fixed background uses background-image on the outer div, so the duotone style can't be applied or it will affect all the inner blocks. I think as a start, I'll disable the duotone button when using fixed background in #31519 and then we can follow up to refactor the fixed style to use a separate div that can be filtered.

[jasmussen]

Connecting the dots here, there's a better solution we need to look into. Because as it turns out, the "fixed background" is unfortunately entirely broken in Safari and has been for a while (see #17718).

That's because background-attachment: fixed; apparently just doesn't work very well in Safari at all.

The solution to fixing that is to emulate the behavior; not use a background image at all, but instead (thinking out loud) combine overflow: hidden; with position: fixed; on an img. It just so happens that if we were to do this, we'd allow duotone on the fixed separate element.

Alex want to pair on this? It might actually end up being easier than disabling duotone just for the fixed background property. In any case if you end up making a PR, please ping me on it!

[annezazu]

Noting that this is an active issue with WordPress 5.8 RC1. I just ran into it after adding in a header pattern that had a fixed background, replacing the image, and trying to use Duotone.

[jasmussen]

Just following up on this one:

Connecting the dots here, there's a better solution we need to look into. Because as it turns out, the "fixed background" is unfortunately entirely broken in Safari and has been for a while (see #17718).

Kerry actually managed to fix this Safari issue, so we probably won't need to make it a separate layer after all.

[annezazu]

This is still an issue in 5.8 RC3 and a pretty big bummer as I imagine folks are going to expect this to work.

[ajlende]

If we get #31519 merged (currently awaiting review), it would disable the duotone button when fixed and repeated backgrounds are set, so at least there wouldn't be any confusion of selecting a duotone option and not seeing it applied.

The proper fix requires changing the structure of the cover block which I was planning to take a look at when #31519 is merged. I know #32972 for duotone in the media & text block is also requested which was also blocked by #31519.

[annezazu]

Noting that this remains an issue with WordPress 5.9 and came up in the FSE Outreach Program's All Things Media exploration:

When fixed background is applied, duotone doesn’t work. (Post editor and FSE Editor)