Css - div in the wrong position in Firefox

Question

I am making a card with css animation, and it works fine in Chrome / Safari, but on Firefox one of the divs gets out of position. Open this script in Chrome / Safari and Firefox to see what happens. Does anyone know about this fix / workarround?

Answer 1

I managed to get Firefox to play better by adding

.perspective { ... position: relative; } 

It seems to indicate an object that the left side is absolutely positioned at. It should be different by default between Webkit and Firefox.

Unfortunately, it seems like there is a problem with this right now, but at least you're one step closer!

Cool effect, however, XD!