search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

Duotone in cover block slows scrolling when background is fixed #46470

Open efu98 opened 1 year ago

efu98 commented 1 year ago

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): current

Expected behaviour (without duotone): expected

Environment info

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 6 months ago

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

mikemcalister commented 1 month ago

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.