Border displayed around expand button during animation on Firefox

[wilhelmer]

Context

No response

Bug description

On Firefox, a small border is displayed around the "expand" button during its animation:

expand-button-firefox.mov

This does not happen on Chrome:

expand-button-chrome.mov

Related links

None

Reproduction

example.zip

Steps to reproduce

1. Build the sample project.
2. Click on the expand button next to "Section".

Browser

Firefox

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[squidfunk]

Thanks for reporting. Possibly related: https://bugzilla.mozilla.org/show_bug.cgi?id=1671784

[squidfunk]

Thanks for reporting! While it is not completely fixable, I think I found a good solution in 1663d84. The rotation is now defined on the icon (pseudo element), not the containing element, and by setting border-radius to the same value as the containing element the issue is almost entirely gone. Here's a video with a bright color which makes it particularly apparent:

Ohne.Titel.mp4

---

Note that the video itself has compression artifacts 😅 Let's hope that this get fixed in Firefox soon.

[wilhelmer]

The bug is 2 years old, so I wouldn't count on it 😜 But it's therefore even better that you fixed it (or rather worked around it), worth the effort. Thanks!

[squidfunk]

Released as part of 9.0.14.