ipad retina display webkit animation performance poor

Question

I'm trying to apply a simple rain effect using webkit animation, on ipad 2 it runs fine with no issues but on newer retina display ipads it runs extremely slowly:

.rain{
width:100%;height:100%;
background-image:url('rain.png'),url('rain3.png'),url('rain2.png');
-webkit-animation:rain 1.5s linear infinite}
@-webkit-keyframes rain{0%{background-position:0 0}100%{background-position:900px     1000px,400px 400px,300px 300px}
}

I've seen mention of using 3d transforms to trigger hardware acceleration in ios but when applying them directly to this class the animation stops, I'm not even sure if these make a difference anyway.

-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
-webkit-transform: translate3d(1);
-webkit-transform: scale3d(1);

I'm aware the question may be a duplicate of iOS Webkit animation performance suffers only on retina display but that was asked a long time ago with no real conclusion.

Is there any solution to this problem? or anything to give even a slight boost in performance?

Answer 1

Are the rain images retina? Not seeing, a background-size tag, I assume they're not. This means webkit must anti-alias each of those images, and because the anti-aliased image isn't cached, it must re-anti-alias continuously. try doubling the resolution of your image and use the background-size property.