Smooth scroll and grids + :hover transitions bug

Yesterday I found a bug in Chrome with enabled smooth scroll. If you have a grid cell with scrollbar and some elements that have hover animations, scroll will be broken and move chaotically if your mouse will be move through that elements.

Click here to see an example on codepen

Try to scroll over all container and move cursor in and out of images with transitions for opacity and filter properties

Unfortunately I can’t remove grids from my project for now so I tried to solve this problems.

First try (fail)

So I tried to fix with following hack: add scroll event handler to scrollable container and add pointer-events: none and transition: unset for all items inside until scroll ends. But it won’t help you if you have already triggered hover effect before scroll.

Second try (success)

Next solution looks crazy but it works. Solutions is to add transform: translate3d(0, 0, 0) for animated elements inside container.

Note: if you have a large list of items so that hack will cause lags because it forces browser to create a layers for each item

If you know better solutions, please write a response here. I’ll be happy to include this to post.