Repository navigation
Popovers are sometimes blurry in WP 7.0 #76899
Description
Description
When using WP 7.0 my popovers' contents sometimes remain blurry after opening (more often than not).
Here's a blurry popover:
If I inspect the element and remove the CSS .components-popover { will-change: transform; } it stops being blurry:
Anybody else experience it?
It appears the will-change: transform was added a while ago here #46187 , not sure what changed since then. The purpose was to prevent repainting when scrolling, but with will-change: transform removed it still won't repaint the popover when scrolling, so maybe the rule .components-popover.is-positioned { will-change: initial; } or something can fix it.
Step-by-step reproduction instructions
I can reproduce in Chrome 142 in the playground: https://playground.wordpress.net/?php=8.3&wp=beta&networking=yes&language=&multisite=no
Screenshots, screen recording, code snippet
No response
Environment info
No response
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
Please confirm which theme type you used for testing.
- Block
- Classic
- Hybrid (e.g. classic with theme.json)
- Not sure
Activity
Mamaduka commentedon Mar 30, 2026
cc @WordPress/gutenberg-components
t-hamano commentedon Mar 30, 2026
@ktmn, I'm sure you're using Windows, but I can't replicate the problem on my Windows machine 🤔
Mamaduka commentedon Mar 30, 2026
I can reproduce this occasionally and can confirm that disabling
will-change: transformimproves rendering. Originally, thought it was a fluke on my machine.Testing on MacOS and Chrome.
ciampo commentedon Mar 30, 2026
This looks like a browser rendering glitch, potentially specific to Playground?
I quickly tested the link and I can reproduce the blurriness. It does get fixed by removing
will-change: transform, but I tried subsequently re-enabling it and the blurriness doesn't come back.In other words, it looks like toggling
will-changeforces the browser to re-paint the popover, which gets rid of the blurriness. The same "fix" can be triggered by changing any other CSS property that causes a separate stacking context, such as settingopacity: 0.99.To recap, I don't think that removing
will-changeis the right move here — it may not work reliably as a fix, and it has a high chance of introducing performance regressions that would need a close investigationktmn commentedon Mar 31, 2026
Yes, probably a rendering issue specific to my GPU/drivers/display or something like that. Seems to happen to me on any Chrome-based browser, but not Firefox.
I wonder why it doesn't happen on WP 6.9. Maybe having view-transitions related CSS puts the browser in some sort of a different mode? Any snippet with which I could dequeue view transitions to test?
In any case, this CSS seems to solve the issue for me:
Yes, toggling will-change back on will not bring the blurriness back.
Changing opacity didn't have any effect for me.
How ever I found that if I resize the window to introduce a scrollbar in the popover then the blur goes away, and when I resize the window again to get rid of the scrollbar then it comes back:
bbs.mp4
Not sure if the blur is visible on the video due to encoding, but here's a side-by-side comparison:
ciampo commentedon Mar 31, 2026
Yup, it definitely looks like a OS/browser specific rendering glitch, and I confirm my inclination to avoid any code changes to try and fix it, unless we can confirm that it affects the majority of consumers.
@ktmn , out of curiosity, can you reproduce outisde of Playground? Asking because playground wraps the whole WordPress site inside an
iframe, which could be a further narrowing factor for what exactly triggers this render glitch.ktmn commentedon Mar 31, 2026
Yes
t-hamano commentedon Apr 8, 2026
I was able to reproduce the problem locally, but I believe this isn't new to WP 7.0. The same issue could be reproduced with WP 6.9.
a5591563124d0629d315a404b01200a3.mp4
This issue can also be reproduced in the Playground. In my testing, the problem started occurring from WP 6.7.
Note: It's easier to check if blurring is occurring in full-screen mode.
❌ WP 6.7:
3135863b2a9b3a99f07d4efa86684861.mp4
✅ WP 6.6:
d19ebb9b984a4845427ec6b7faf0689b.mp4
Considering this,
will-change: transformmight not be the direct cause.Popover: reset will-change after positioning to fix blurry rendering
ktmn commentedon Sep 23, 2026
With Gutenberg 24.0.0 the list view is also blurry for me.
WP 7.1.2:
WP 7.1.2 & Gutenberg 24.0.0:
The potential culprit:
Toggling it off removes blurriness.
ciampo commentedon Oct 1, 2026
@ktmn I suggest you open a separate issue for this (and/or even a PR), let's keep this issue focused on popover.
Feel free to tag Aki and myself in it 🙏
ktmn commentedon Oct 4, 2026
Tested #77359, works well for me, thanks
I'll leave it for the time being. Getting inconsistent results myself now. Looking at the code, it seems like the
will-changehas been there for at least 3 years so I'm not sure why I experienced this sudden difference when toggling Gutenberg on and off.