iOSのSafariだと画像をJavaScript入替で表示されなくなるサンプル

HTML

<p>
  <a href="https://iwb.jp/">
    <img src="img/off.png" class="img" width="50" height="50">
  </a>
</p>
<p>
  <a href="https://iwb.jp/" class="sprite"></a>
</p>

JavaScript

$(function() {
  $(".img").hover(
    function() {
      var src = $(this).attr("src");
      var temp = src.replace("off.png", "on.png");
      $(this).attr("src", temp);
    },
    function() {
      var src = $(this).attr("src");
      var temp = src.replace("on.png", "off.png");
      $(this).attr("src", temp);
    }
  );
});

CSS

.sprite {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url(img/off-on.png) no-repeat;
  background-size: 50px auto;
}
.sprite:hover {
  background-position: left bottom;
}