UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36

Steps to reproduce the problem:
Please open the attached file (animation-test.html), the issue should be noticeable right away.

What is the expected behavior?
In this particular case, the line on the very top of the animation shouldn't be visible at all (like in animation-test - not scaled.html).

What went wrong?
If you look at the animation file (https://static-asm.secure.skypeassets.com/pes/v1/emoticons/manjudge/views/default_80_anim_f) you can see it's made up of 80x80px frames located one on the top of another. The animation uses translate3d CSS attribute to step over frame after frame (24 FPS, please have a look at the code).

Looks like instead of stepping 80px at once, it steps for example 79.8px (the exact value might be different) so that you can see the very bottom of the previous frame at the top of the current one.

It happens only if transform: scale() is applied. The same happens if you open the "not scaled" file and scale it up with [Ctrl][+]

As I was googling for this, seems like this kind of issue (incorrect animation when scaling) is pretty common. I found an opinion that it began when Chrome introduced scaling to 110% with [Ctrl][+].

Did this work before? N/A 

Chrome version: 68.0.3440.84  Channel: stable
OS Version: 10.0
Flash Version:
 

Deleted: animation-test.html 1.2 KB

animation-test.html 1.2 KB View Download

Deleted: animation-test - not scaled.html 1.2 KB

animation-test - not scaled.html 1.2 KB View Download