Modal Component: CSS Blur filter causing performance issues

[annezazu]

Description

When trying to use any modal with the new blurred design using Gutenberg 14.0.2 and WordPress 6.0.2, there's noticeable lag. This happens in the Site Editor and Post Editor when doing things like: opening pattern explorer, opening template part inserter, and opening preferences. I can't tell if this is related to the new design or something else entirely so let me know if the title needs to be updated :)

Step-by-step reproduction instructions

1. Open the Site Editor.
2. Open the Inserter, go to the patterns tab, and hit "explore". Notice lag.
3. Close out of that experience.
4. Open preferences from the three dot menu. Notice lag.
5. Close out of that experience.
6. Add a template part block and choose the option to select from a current template.
7. See modal pop up and notice lag.

Screenshots, screen recording, code snippet

lagging.mov

Environment info

• WordPress 6.0.2
• TT2 and Tove (two block themes)
• Gutenberg 14.0.2

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

[ironprogrammer]

Thanks for the report @annezazu!

I compared Gutenberg 13.6 to 14.0.2, and agree there is a noticeable repaint lag for some operations that involve activating/deactivating the modal with background blur effect.

Test Report

Environment

• OS: macOS 12.5.1
• Browser: Safari 15.6.1
• Browser: Google Chrome 104.0.5112.101
• Server: nginx/1.23.1
• PHP: 7.4.30
• WordPress: 6.0.3-alpha-54035-src (WordPress:trunk, 6.0 branch) and 6.0.2 release
• Theme: twentytwentytwo v1.2
• Active Plugins:
  • gutenberg v14.0.2 (compared to v13.6)

Reproduction Steps

1. Open the Site Editor.
2. ✅ Open the Inserter, go to the patterns tab, and hit "explore". Notice lag.
3. Close out of that experience.
4. ❌ Open preferences from the three dot menu. Notice lag.
5. Close out of that experience.
6. Add a template part block and choose the option to select from a current template.
7. ✅ See modal pop up and notice lag.

Expected Results

• ✅ Experienced unexpected latency when opening Patterns explorer and Template chooser.
• ❌ Did not notice lag opening editor Preferences, though worth nothing that this modal is text-based and does not have heavy rendering requirements, so it might not be noticeable on my system (MacBook Pro 16", M1 Pro).

Additional Notes

• In addition to witnessing what appears to be repaint latency when the blur is activated/deactivated, the previews for Patterns and Template parts also seem to render more slowly in 14.0.2. See video below for comparison of how this appears in the block inserter.

issue-43877.mp4

[talldan]

I'm not noticing any particularly bad lag opening any of those modals (tested Firefox, Safari, Brave), but my machine is also not lacking for performance. 😬

I did notice closing the 'Choose a Template Part' modal was very laggy, and completely froze a couple of times.

[glendaviesnz]

I didn't notice a performance issue here either, but on a brand new laptop. CSS blur can affect performance, but I wouldn't have thought so in this instance, is more in cases where you are doing things that try and animate and blur. @annezazu are you able to try this PR with the blur removed and see if you notice any difference in performance, we can at least rule out the CSS blur that way.

[annezazu]

Just tried it and the lag is gone when I use that PR.

lag.gone.mov

On the same site, if I use 14.0.2, the lag returns. Seems we have our answer :)

[glendaviesnz]

@ciampo, @jameskoster - the potential performance issues of using CSS blur on the modal component was mentioned on the PR where it was added, and it looks like it is an issue for some people, dependent on machine it seems. If we can't find a reliable fix for this it may be something we have to revert for 6.1 - do you have any thoughts on alternatives?

[glendaviesnz]

@annezazu found a note here about adding a transform to the same layer which makes the browser use GPU instead of CPU which can improve performance. I have updated that test PR to do this, are you able to try it again and see if that fixes the performance issue while keeping the blur please? Out of interest, are you testing with Safari?

[jameskoster]

@annezazu Is the lag something you've only noticed recently? The blur effect has been merged for a while so if this has only just come up then it might be worth investigating other possible culprits.

[ciampo]

Hey @glendaviesnz !

If we can't find a reliable fix for this it may be something we have to revert for 6.1 - do you have any thoughts on alternatives?

I wouldn't revert the whole PR, since it did much more than just adding the blur.

If we had to remove the blur, I would go for the approach that you took in this commit

[glendaviesnz]

I wouldn't revert the whole PR, since it did much more than just adding the blur.

Yeh, sorry, was just talking about reverting the blur, not the whole PR.

[annezazu]

Catching up here. Yes, I only noticed this recently so I'm not quite sure what's changed since it has indeed been in place for a while.

Tried the additional PR and I fear there is still lag, although it's a touch better:

lagging.still.mov

It still feels pretty broken though as a user and impacts a ton of items right now from preferences to replacing template parts to exploring patterns.

[glendaviesnz]

Tried the additional PR and I fear there is still lag, although it's a touch better:

Out of interest, which browser are you using for testing @annezazu and what are the specs of your laptop?

[annezazu]

I'm using Chrome Version 104.0.5112.101 and using macOS Monterey 12.5.1 with M1 Pro chip.

[jameskoster]

That machine should definitely not be lagging 😅

It's probably not related, but sharing here just in case... in the console I see the following error:

The number is constantly increasing, and is up to 2200 since I took the screenshot :D

[annezazu]

Doing more testing for fun - At first it was super snappy using Safari. However, when I tried replacing template parts and attempting to scroll or search, everything totally froze:

safari.stuck.mov

Might be related: #43760

[annezazu]

This just got wildly worse with the 14.1 RC: https://github.com/WordPress/gutenberg/releases/tag/v14.1.0-rc.1

To the point that I got an unresponsive warning when trying to replace my header template part for a demo and a white screen of death. Even on refresh, I can't get the Site Editor to load still. I had to open a new tab to gain access once more. I tried this in Chrome in an incognito window to be extra safe.

[annezazu]

To get the page to crash, I have to pause before selecting a template part or try to scroll a bit. This makes me think it is indeed related somehow to this: #44103 @talldan what do you think?

frozen.mov

[annezazu]

Here's a video with Safari using 14.1 RC1. The lag at first again seemed better but then VERY strange things started happening, including at the very end where the editor has a mind of its own and takes a bunch of actions all over that I didn't do:

safari.lag.mov

[ironprogrammer]

I am experiencing similar behavior in the modals that @annezazu has reported. This test report refers to Gutenberg 14.1 RC1 (trunk).

Test Report

Environment

• Hardware: MacBook Pro (16-inch 2021), Apple M1 Pro
• OS: macOS 12.5.1
• Browser: Safari 15.6.1
• Browser: Google Chrome 105.0.5195.102
• Server: nginx/1.23.1
• PHP: 7.4.30
• WordPress: 6.1-alpha-53344-src (trunk)
• Theme: twentytwentytwo v1.2
• Active Plugins:
• debug-bar v1.1.3
• gutenberg v14.1.0-rc.1

Reproduction Steps

1. Open the Editor.
2. Open the Header template selector modal.
3. Scroll through the list of headers.
4. ✅ In Chrome, note that the modal becomes unresponsive after loading just the first couple of templates. If you wait long enough, the browser raises the "page unresponsive" alert.
5. ✅ In Safari, note that the UI becomes sluggish, where the scroll behavior does not match with user interaction. Other parts of the modal appear unresponsive (but may just be lagging as interactions catch up). Controls sometimes "jump" to a location different from the cursor/pointer.

Expected Results

• ✅ Experienced unexpected latency and unresponsiveness when interacting with the template chooser modal.

Videos

Chrome - becomes unresponsive

Chrome.unresponsive.mp4

Safari - extreme latency

Safari.extreme.latency.mp4

[annezazu]

I was trying to record a video for a different bug 😓 when I found this performance problem is also impacting the ease with which I can create new templates. Here's the video showing the editor kind of going a bit wild due to lag with the performance issue:

template.weirdness.mov

This all feels entirely unusable. Using 14.1 RC1 and 6.0.2.

[ndiego]

I was able to replicate it. The easiest way to reliably replicate, which I have found, is to just open the Site Editor and keep opening and closing different modals. For me, the lag is not very noticeable at first, but then it slowly increases until the page just crashes.

[glendaviesnz]

@annezazu I have rebased the PR with blur removed so it should be pretty much the same as 14.1 RC1 now, can you give it a try again and see if it resolves these worse performance issues?

If you could also try this PR - this one removes something that is causing underinglying performance issues in the editor which could potentially be the cause rather than the blur. Given the fact that the performance degrades over time it is more likely to be something like this rather than just the CSS blur.

[annezazu]

That PR is strangely working really well (ran into some weirdness with the template creation experience, will open another issue). I tried everything I could think of to get it to break. Paused, searched, clicked around a bunch, etc.

testing.without.blur.mp4

Edit to add: I say strangely because it does feel like the performance degrades over time. Not because your work isn't excellent! :D

[tellthemachines]

This just got wildly worse with the 14.1 RC: https://github.com/WordPress/gutenberg/releases/tag/v14.1.0-rc.1

To get the page to crash, I have to pause before selecting a template part or try to scroll a bit. This makes me think it is indeed related somehow to this: #44103 @talldan what do you think?

The problematic code that #44103 is trying to fix was released in 14.0. Not saying it's unrelated 😅 but if the performance got worse with 14.1 then there may be more than one cause.

[glendaviesnz]

@annezazu there was a copy and paste error in my comment above, second PR link should have pointed to #44139, but they both point to the original blur removal PR, if you have a minute to try this second PR sometime also that would be great thanks.

[tellthemachines]

@glendaviesnz #44103 does essentially the same as #44139 so either will work for testing.

[glendaviesnz]

Looks like there might be some other memory leak issues - even with the Group useEffect issue removed toggling between the site editor and the templates list, and not doing anything else caused the tab memory usage to slowly grow from 1.4GB to 3.1GB

[talldan]

I was trying to record a video for a different bug 😓 when I found this performance problem is also impacting the ease with which I can create new templates. Here's the video showing the editor kind of going a bit wild due to lag with the performance issue:

I think this is explainable - every time one of those buttons is clicked, the browser makes a request to the server to create a template post type. I think ideally you shouldn't be able to click multiple times while a template is already in the process of being created. There should be a loading spinner or something for slow connections. I think it's worth creating an issue for this and fixing it prior to 6.1, it can definitely be considered a bug.

To get the page to crash, I have to pause before selecting a template part or try to scroll a bit. This makes me think it is indeed related somehow to this: #44103 @talldan what do you think?

In my testing, #44103 makes interacting with template parts significantly quicker. I'd recommend giving it a test if you can. Still need to solve some backwards compatibility issues before being able to merge a fix.

The issue seems to be related to template parts that have lots of groups, so in other themes the issue isn't as apparent.

It sounds like @glendaviesnz has spotted some other performance issues which will be interesting to figure out!

[annezazu]

I think it's worth creating an issue for this and fixing it prior to 6.1, it can definitely be considered a bug.

Looks like @ntsekouras has already jumped in there #44146 Thank you so much.

[talldan]

Should this one be close now that #43929, #44146 and #44176 are all merged?

[annezazu]

Yes, let's close for now and I can reopen if I run into it again while testing :)