Hardware Acceleration blurs images when scaled?

[Rugg]

Scenario:

I’m using javascript to dynamically size an image relative to the window size…works perfectly. The same image has a jQuery animation for something completely unrelated. At times the animation will stutter, so I used css to enable hardware acceleration for a smoother result. This works great, but has one problem…

Problem:

The dynamically sized image appears blurry after resizing the window. The problem disappears when hardware acceleration is disabled.

CSS:

.image { 
    /* Enable Hardware Acceleration */
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

Anyone have a solution for this? Thank you…

[Author]

Posts