ExtremeTwix

Well thanks for the help! I changed my sizings to percents and the issue seems to have vanished! And regarding the ems, I noticed that when I specify both from and to, the issue doesn't happen. Thanks for your time Also now I can use translateX and Y without issues too

Well, I uploaded gifs for the issue if that helps at all: https://i.gyazo.com/eba96a1d03551aa8148b7fd735b4da8b.gif https://i.gyazo.com/dda6ca37fc7b38fa6fba1350b1832300.gif Also, for translating, this is a gif for my issue with them https://i.gyazo.com/0ca5460b875e3c9368e9927da8e7300d.gif https://i.gyazo.com/c78843876f293eab7c27a34409a55b28.gif I think the main issue comes from me using ems and resizing the main container to fit a 16:9 while manipulating font size to keep elements in shape, as I tried isolating the code outside the project and it worked just fine too.

Also of note that the issue doesn't happen when I use pure CSS3 animations.

Regarding the Translate property, my only issue with that is the game I am making resizes on window resize and keeps a ratio of 16:9 for the main container. So I am using em to position my elements inside the container such that they keep their positions and sizes relative to the container. I don't know of a way to translate them in a way they keep the same position even after screen resize. Now for the main issue, it appears it only happens when I change the left property of the element AND when the unit is em. Tried pixels and it worked just fine but unfortunately that won't work well.

Hi, I am having this weird issue on google chrome when I change the position of my element, it starts flickering a bit before taking action (like it goes to the right a bit before it follows the animation). The issue does not exist on any other browser though, even Edge. The exact code I'm using is in the codepen, but apparently the issue is non-existent there too.