codepen.io - Broken animation

[webcompat-bot]

URL: https://codepen.io/G-m-r-Giri-Moderator/pen/LYqxgbj

Browser / Version: Firefox 119.0
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
Open the link on ff and chrome. you will clearly see the purple vertical progress bar animation scale should be inside the desktop screen of svg. But it comes out in firefox. works well in other browsers

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[krystian3w]

Looks like PoC not real page.

[softvision-raul-bucata]

We appreciate your report. I was able to reproduce the issue by following the steps to reproduce. The SVG animation is broken, as elements inside are overlapping the outline:

20231108_102836.mp4

Tested with:

Browser / Version: Firefox Release 119.0.1 (64-bit)/ Firefox Nightly 121.0a1 (2023-11-07) (64-bit) /Chrome Version 119.0.6045.124(Official Build) (64-bit)
Operating System: Windows 10 PRO x64

Notes:

1. Reproducible regardless of the status of ETP.
2. Reproducible on the latest build of Firefox Nightly and Release.
3. Works as expected using Chrome.
4. See also: https://bugzilla.mozilla.org/show_bug.cgi?id=1581457

Moving this to NeedsDiagnosis for further investigations.

[qa_45/2023]