codepen.io - Red circles disappear when hovered

[Oks100]

URL: https://codepen.io/Oks100/pen/MWVPQeG

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

Problem type: Design is broken Description: Элементы перекрываются Steps to Reproduce: If you quickly move the mouse over the circles, they disappear

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Note: The issue is not reproducible on Chrome.

Tested with: Browser / Version: Firefox Nightly 105.0a1 (2022-08-15), Firefox Release 103.0.2 Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[qa_33/2022]

[wisniewskit]

It looks like the transitions are somehow conflicting, since the circles only vanish when they're all present. I'm not well-versed in how transitions and animations might interact to cause effects like this, so let's move this to Bugzilla in bz1789053 and see if we can get some clues.

[wisniewskit]

@Oks100, ah, thanks to Mayank on Bugzilla, who found out that somehow this is an issue with transform-style: preserve-3d in Firefox. Removing that or adding -moz-transform-style: flat to disable it just on Firefox helps.