`fade` animation has weird glitch with absolutely positioned element

[mic4ael]

Bug Report

Steps

When using fade animation with Transition, sometimes the animation is a bit glitched. When the animation is complete I can see clear glitch which makes the component flicker.

Expected Result

fade animation should be smooth.

Actual Result

fade animation is sometimes glitched.

Version

2.0.4

Testcase

It is hard to reproduce it directly on codesandbox but I could do it with a simple project built with parcel. The recording below shows the issue.

https://user-images.githubusercontent.com/3616940/135709369-70b2fbc0-2e2a-47f2-9a88-de9c91723e02.mov

https://codesandbox.io/s/semantic-ui-react-forked-bduov

[mic4ael]

Apparently, removing marginLeft and marginRight solves the problem.

[mic4ael]

Apparently, removing marginLeft and marginRight solves the problem.

Unfortunately, that is not the case. Even if I only leave max-width the issue can be still reproduced.

[mic4ael]

Looks like the issue can be only reproduced on Firefox?