How to remove brakes in drawing blocks with large pictures in chrome?

Question

Google Chrome

The essence of the matter on the page: dameteks.ru 4 pictures are laid out in 4 divs, cutting off the excess through overflow:hidden. And when hovering with the mouse, they should gradually increase.
I expected that chrome will be ahead of all browsers and will quickly render graphics. In fact, it turned out that chrome slows down the most, rendering the animation of diverging blocks in about 150-200 ms / frame .. (5-8 fps)
There is still an old version, it works faster, but I did not understand why dameteks.ru/index. html

Answer 1

Five-minute optimization:
1) You don't have 3D acceleration enabled anywhere. Either will-change or translateZ() must be used. Probably easier will-change.
a) Add will-change: width, left; for .side
b) Add will-change: transform, width, opacity; for .img
This is what my timeline looks like without tweaks:
And this is how it looks with my tweaks
As you can see, before tweaks, the average fps was about 30-40 and sometimes it steadily fell to 20, which is generally bad. After 50-60 tweaks with js/layout junk. I won't optimize them here, I'm too lazy :)
2) Your .side changes the left property, this is a very costly garbage. Try to rewrite using translateX. This will give you a performance boost.
3) Changing the width for fullscreen elements is a terribly costly operation, so it's not surprising that without tweaks everything slowed down for you.
UPDATE: Timelines are from chrome if anyone is interested. In its original form, the site was equally terribly slow on chrome / ff. At the same time, everything looked pretty good in ie11 :) I can’t say specifically why everything is like this, because I haven’t done animation without acceleration for a hundred years. Usually chrome always wins, because everything works and animates smoothly in it, then comes ff, where almost everything works, but often there is a subsidence in performance, and the donkey11 closes the top three, in which often a lot of things do not plow (but at the same time what plows , works faster than in ff).