0

I have a Slideshow that scales each image up when its visible. In all Browsers that looks great except in Safari when any other css transform action is fired the smoothing of that images looks pretty bad.

Heres an image: http://snag.gy/43LaH.jpg

The image on the right is after the transition happened (look at the gras and mud).

Any suggestions?

Steffen Moritz
  • 7,277
  • 11
  • 36
  • 55
Grandy
  • 35
  • 8
  • Have you taken a look at http://stackoverflow.com/questions/3900436/image-scaling-by-css-is-there-a-webkit-alternative-for-moz-crisp-edges . It seems `image-rendering:-webkit-optimize-contrast;` should solve it – michaeln Mar 12 '15 at 10:26
  • Haven't seen that one. This solution changes only one thing: now it looks all the time bad and not only after the transform ... – Grandy Mar 12 '15 at 12:17

1 Answers1

1

Got a solution for the problem that seems to trick the rendering engine ... but its definitely a hack

#showcase img {
    -webkit-animation: spinhack 1s linear infinite;
    -moz-animation: spinhack 1s linear infinite;
    animation: spinhack 1s linear infinite;
}

@-moz-keyframes spinhack { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(0deg); } }
@-webkit-keyframes spinhack { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(0deg); } }
@keyframes spinhack { from { transform: rotate(0deg); } to { transform: rotate(0deg); } }
Grandy
  • 35
  • 8