bxsliderでトップページのカルーセルを作る。
各種ブラウザでチェックして問題なく動いている。

そのソースをwordpressに組み込むと最初の1枚目の表示でFirefox不具合がでていた。

具体的には、本来表示されるべき1枚目ではなく、最後に表示されるべき画像が1枚目のところに出てしまっていた。

chromeでは問題ない。Firefoxだけでエラー。

ローカルではうまくいっていたのになぜ？？

調べてみた結果、結論から言うと、

wordpressの

srcset=""

属性がエラーを 起こしていた。

wordpress4.4からはレスポンシブ対応するために、srcsetというのがimgタグに自動挿入されるっぽい。

<img src="hoge.png" srcset="hoge.png 1000w, hoge-300x140.png 300w">

みたいな感じで。



srcset属性とは、HTML5で策定された新属性で、ブラウザの大きさに応じて違う画像を読ませることができる、というもの。

css media-queryのブレイクポイントでの処理をhtmlだけでできちゃう、というものだ。

便利っちゃ便利かもしれないけど、どうやらIEに対応していない。
最新のIEにも。

srcset属性の各種ブラウザ対応
 

そしてbxsliderライブラリでも不具合がおきた。
（bxsliderでもjs側でレスポンシブ対応してるわけだから、そりゃガチンコぶつかりあっても不思議はないよね。）
 

とりあえず、ちゃんとコーディングしてからwordpressを導入する場合は、srcset属性が自動付与されるのを無効化したほうがよい。

やり方はfunction.phpに1文をいれるだけ。


 add_filter( 'wp_calculate_image_srcset', '__return_false' );
 

お客さんにこれまで言われたことがあるわけじゃないけど、

「wordpressいれたらIEで画像が変！」っていわれたときもちょっと思い出してみても良いかもね。

 
");