Scrolling performance issue with background-size and the quick fix

The homepage of my site is currently a grid of my most recent articles. The images are set as background images to each div with a CSS property of background-size: cover. The problem is this causes some frame rate loss when I start scrolling, due to the number of posts listed, making the browser experience a bit slow and laggy.

For the workaround, I added this old hack…

…to my element’s CSS properties.

And problem solved! My site is now scrolling smoothly again 🙂
Check out this article for the explanation and this link for what to be careful of when using translate3d hacks.

Icons made by Icon Monk from www.flaticon.com is licensed by CC 3.0 BY
Elmer Balbin

Web developer from Bacolod, Google Local Guide, and casual DotA 2 player.

about me

Leave a comment

avatar

Get great deals on hotel rooms from all over the world BOOK NOW