Repository navigation
Cover block: adding duotone with a fixed background causes lag in Safari + Firefox #46470
Description
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
- Add a cover block with an image in the background
- Set one of the duotone colors combinations
- 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
Activity
[-]Duotone in cover block slow scrolling when background is fixed[/-][+]Duotone in cover block slows scrolling when background is fixed[/+]Mamaduka commentedon Dec 13, 2022
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 commentedon Jan 3, 2023
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 commentedon Feb 14, 2023
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 commentedon Apr 30, 2024
I've seen this as jumpy/jitteryness on Firefox and it gets worse if you add more than one fixed background cover block.
mikemcalister commentedon Sep 28, 2024
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.
annezazu commentedon Sep 25, 2026
Doubling back on this and it's still a bit laggy in 7.1.2 and GB 24.0. It's substantially better than what I can see from this original report but still not as smooth as Chrome.
Safari
safari.mov
Chrome
chrome.mov
[-]Duotone in cover block slows scrolling when background is fixed[/-][+]Cover block: adding duotone with a fixed background causes lag in Safari + Firefox[/+]