0

I have recently been animating a fixed position element using CSS by changing the left/right propertied of the element.

This works fine but causes some 'janky' animation when it comes to Firefox/Safari. I had a look at optimisations and the general thought it to use transforms as it performs much better and you can use the GPU of your computer which means the animation runs much smoother.

The problem I have now ran into is after reading this qusetion/answer it looks like you can't run transforms on fixed position elements.

Has anyone got any ideas on where best to go with this?

Happy to setup a codepen if it helps people.

Edit: As Cbroe pointed out, it's only on fixed position children of parent elements you're applying the transforms too.

Harry Francis
  • 133
  • 1
  • 10
  • _“it looks like you can't run transforms on fixed position elements”_ - that’s not really what they’re saying there ... You can not fixed position descendants of transformed elements, but if you apply both to the same element, it says there it should work fine. – CBroe Feb 13 '18 at 11:57
  • Oh wow sorry, I must have jumped the gun when reading the question. I assumed they didnt work together at all! I do have children with fixed positions but I could take them out and move everything individually... it would be nice to have them all moving from one place but as you said this is where the problem lies. – Harry Francis Feb 13 '18 at 11:59

0 Answers0