Poor performance of Chrome using background-size: cover

Question

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%;
}

Valois

Answer 1

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/

Spacial

Thanks man, Im trying to find a pure css way. I will use jquery if I cant solve. – Valois

It seems that chrome still has this issue to this day. It works just fine on Firefox... – Postpositive