弊社では、サイト構築の際に画像のロールオーバーやページ内リンクのスムーズスクロールなど、様々な機能が使えるyuga.jsを使用しています。
yuga.js公式サイト
しかし、少し前にyuga.jsを使用した際にロールオーバーがChromeでの閲覧時のみ機能しない事象が起こりました。
今回はその解決方法についてご紹介します。
原因について
2014年10月7日にChrome38の安定版が公開され、Chrome38からレスポンシブイメージの[picture]要素と[img]要素に新しい属性が追加されました。そのことが理由でyuga.js内に書いてある属性とバッティングしてしまったことが原因です。
また、yuga.jsのバージョンは最新の0.7.2。
jQueryのバージョンは1.7.1を使用していました。
参考サイト – Dev.Opera （Operaのサイトですが、OperaはChromeと同じエンジンを使っています）
対処法
yuga.jsに記載されている[currentSrc]属性の名前を変えてください。以下、修正例です。
修正箇所1
修正前
this.currentSrc = this.originalSrc.replace(new RegExp(‘(‘+c.postfix+’)?(\.gif|\.jpg|\.png)$’), c.postfix+”$2″);
$(this).attr(‘src’,this.currentSrc);
修正後$(this).attr(‘src’,this.currentSrc);
this.currentSrcYuga = this.originalSrc.replace(new RegExp(‘(‘+c.postfix+’)?(\.gif|\.jpg|\.png)$’), c.postfix+”$2″);
$(this).attr(‘src’,this.currentSrcYuga);
$(this).attr(‘src’,this.currentSrcYuga);
修正箇所2
修正前
return Boolean(!this.currentSrc);
修正後
return Boolean(!this.currentSrcYuga);
まとめ
古いブラウザや新しいブラウザで動作するようにJavaScriptやCSSを修正することは中々大変ですよね。よくiPhoneのOSも更新されますが、アプリを開発してる人も毎度苦労をしてるんだろうなぁとつくづく思います。
yuga.jsは便利なJavaScriptなので使っている人も多いかと思います。今後も優雅にWeb制作をするためにyuga.jsをこの機会に修正しましょう。
