Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Poor performance of Chrome using background-size: cover

I need to cover background in my site and I always see lags/slugs on mouse over or any other action. Do you have any idea how to fix this issue? I have a working example here (If I didnt update the code yet) : http://natgeo.geryit.com

ul#posters li {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    height: 170px;
    position: relative;
    width: 25%;
}
like image 485
goksel Avatar asked Dec 07 '25 08:12

goksel


1 Answers

It appears webkit doesn't cache the resized image and renders it every time, causing the lag.

You're out of luck when it comes to background-size in chrome.

I've seen people do it with Javascript / jQuery. See http://srobbin.com/jquery-plugins/jquery-backstretch/

like image 148
Moin Zaman Avatar answered Dec 08 '25 23:12

Moin Zaman