Holiday snow causes jitter/shake on sites with ar/Arabic language

[philnick206]

Impacted plugin

Jetpack

Quick summary

Activating holiday snow on a site with "ar" set as the site language will cause a jitter/shake to appear when viewing the site in a browser.

Steps to reproduce

1. Activate holiday snow on site
2. Ensure language is set to 'ar'
3. View site in a browser

A clear and concise description of what you expected to happen.

Snow should be visible but nothing else

What actually happened

Snow is visible but horizontal bars on browser flicker (even though there is no content off the page), screen can appear to shake

CleanShot.2024-12-10.at.19.31.04.mp4

Impact

Some (< 50%)

Available workarounds?

No but the platform is still usable

If the above answer is "Yes...", outline the workaround.

No response

Platform (Simple and/or Atomic)

No response

Logs or notes

Tested on Twenty Twenty Four theme.
Reported in 9159191-zd-a8c

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Support: The issue relates to a bug that could affect user experience, which falls under support-related concerns.
• [mu wpcom Feature] Holiday Snow: The problem directly involves the holiday snow feature, which is the main subject of the issue.
• [Feature] Jetpack: Since the affected plugin is Jetpack, this label indicates that the problem is related to its functionalities.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 9159191-zen

[Robertght]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated, but I don't see a screen shake, but a horizontal scroll that appears briefly from time to time.

📌 ACTIONS

• Triaged
• I lowered the priority to normal.

@jeherve I'm cc'ing you as I don't know who is the snow owner 😆

[jeherve]

I can reproduce, it happens with any RTL language. It would appear that the document width is bumped with the flakes, thus causing the horizontal scrollbar to come up.

This is something that would need to be fixed in the upstream library I'm afraid. I attempted to play with some of the customization options (namely flakeLeftOffset and flakeRightOffset, but no luck. I may try to play with this some more in the future, but realistically it may make more sense to switch to a different implementation entirely, possibly a CSS-only one.