Duotone in cover block slows scrolling when background is fixed

[efu98]

Description

When adding the duotone effect on the background of a cover block, the background seems to move slower than the scroll.
I think I should be working the same as when there is no duotone effect ; there, the parallax effect works properly.

Step-by-step reproduction instructions

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

Screenshots, screen recording, code snippet

Current behaviour (with duotone):

Expected behaviour (without duotone):

Environment info

• Wordpress version 6.1.1
• Browsers : Firefox 107.0.1
• Device : Macbook with macOS Catalina 10.15.7

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

This issue was reviewed in today's Editor Bug Scrub. I was able to confirm a similar issue with Firefox and TT3 themes. But the behavior looks okay in Chrome.

@ajlende, @matiasbenedetto, do you remember if there are any known browser issues with Duotone filters that can cause this behavior?

[ajlende]

I know there are some issues with Safari that we've had to work around, but I use Firefox as my daily browser and haven't had any issues. The filter is computed on the fly, so especially high resolution images may cause issues on slower hardware because I think the cover block uses the full resolution image always, unlike the image block.

[ajlende]

especially high resolution images may cause issues on slower hardware

Tested this with an 8k image to confirm and it looks like Firefox is not computing the filter on the source image, so the image size doesn't have an effect. It is, however, trying to recompute the filter when you scroll on every frame on the CPU which is still quite slow especially when the cover block is filling a large portion of the visible area.

[slambert]

I've seen this as jumpy/jitteryness on Firefox and it gets worse if you add more than one fixed background cover block.

[mikemcalister]

I can also confirm this is affecting Safari and Firefox, but it works ok in Chrome. In Safari and Firefox, the combination of duotone and fixed background causes sluggish scrolling.

For me, the issue is not related to high resolution images or slower hardware. I have optimized images and a maxed out MacBook Pro.