It's not often that Safari suffers from bugs, but when it does they tend to be whoppers. I recently noticed when performing a CSS animation that as the animation reached its conclusion, the image that I was moving flicked to a low-resolution pixelated version.
Annoyingly the bug only seems to happen in Safari and everything works smoothly in all other modern browsers. However after a quick google search for the solution, it appears to be a wide spread bug over all Apple browsers and so can affect iPads and iPhones as well.
Luckily there's an easy solution. I won't go into detail as to why this fixes it, you can easily find it elsewhere if you google "safari IOS animation bug". It's to do with 3D-transforms, even if you're not using them. Quite simply, here's the solution so you can get on with the rest of your day...
Locate the img in your CSS, not the container it sits in such as the div, ul or ol, then add the following two statements:
You're welcome :)