[Bug]: Hovering over style variation in onboarding is janky in Firefox

[dsas]

Quick summary

When choosing a style variation during onboarding, the animation when hovering over a style variation is janky in Firefox, flashing scrollbars for a split second. Chrome is fine

Steps to reproduce

1. Create a new site
2. Choose a plan (free is fine)
3. On the 'Pick a design' step, click a theme that has variations (little colourful circles beneath the preview)
4. Hover the mouse over the preview

What you expected to happen

A smooth animation to change the text from 'Aa' to the name of the variation.

b8e8xK.mp4

What actually happened

A janky animation briefly showing scrollbars as the text changes from 'Aa' to the name of the variation

xCZ3W5.mp4

Browser

Mozilla Firefox

Context

Found while testing #70775

Platform (Simple, Atomic, or both?)

No response

Other notes

No response

Reproducibility

Consistent

Severity

None

Available workarounds?

Yes, easy to implement

Workaround details

Don't use firefox, or just shrug and ignore it.

[dsas]

@Automattic/ganon maybe one for you?

[fushar]

Thanks for reporting. I find that this issue also happens in the Site Editor (Gutenberg). We are using the same Global Styles code from Gutenberg in onboarding, so this is not Calypso's issue.

I opened an issue there with more details: WordPress/gutenberg#46506. Please chime in if you want to add more details!

[fushar]

Adding this to our Lego maintenance board. According to WordPress/gutenberg#46506, this is fixed upstream in 14.8. Let's try to see if we need to port anything to our onboarding design picker component.

[fushar]

I've confirmed that the issue is fixed when we open the Global Styles tab in the Site Editor on dotcom.

Now we somehow need to port the changes to the onboarding Design Picker 😄

[taipeicoder]

I can't seem to reproduce this issue anymore. So it might have been fixed somewhere along #73634. Let's reopen a new task if the issue pops up again 🙂