I am animating a header on hover with the transforms scale() and translate3d(). My Typescript listens on mousemove over three different div and changes the translate3d style of an svg image accordingly.
Everything works as expected on Chrome and Edge, however animations are laggy on Firefox. Performance seems to consequently drop during the scale() transform and also sometimes during the translate3d(). I made this stackblitz to reproduce my issue.
I know that performance between browsers has already been discussed here but I tried every solution I came across without success :
- Use cheap animation with transform instead of changing the width/margin of elements
- Fix elements in absolute positioning
- Change backface visibility
- Use will-transform
- Trick the browser to use hardware acceleration with translateZ() or rotateZ()
I still uses the padding-top method to make my div squares, however the lag persist even if I remove it.
Is there a way to adapt my animations in order to use less CPU ? And why can't Firefox handle these ones ?
Thanks in advance for any suggestion you might have.