概要

Picturefill.jsを使った際にハマった点があったのでまとめました。

Picturefill.jsとは？

公式サイトはこちら
IE11などの非対応ブラウザでも<picture>タグを使えるようになるpolyfillです。
<picture>タグが分からないって人はいますぐ調べるんだ！！！

通常下記の様に読み込みだけで問題ないのですが

test.js

// importするだけ
import 'picturefill'

最近ではRetina対応のため下記の様に、2xの画像を入れているケースが多いかと思います。

<picture>
  <img
    src="hoge.jpg"
    srcset="hoge@2x.png 2x"
    alt="代替テキスト">
</picture>

この場合、polyfillが2xの画像を表示させてしまいIE11で表示崩れが発生しました。

普通に公式サイトに書いてありました。
（英語だから見逃してた…悪い癖…。）
下記のように別途Pluginを読み込むことでIE11でも問題なく表示されました。

test.js

import 'picturefill'
// 追加でimport
import 'picturefill/dist/plugins/intrinsic-dimension/pf.intrinsic.min.js'

その他にも複数Pluginが用意されているようです。
（利用シーンはまだ詳しくわかってませんが…。）

とにかく<picture>タグはPicturefill.jsがあれば完全対応可能なので積極的に使っていこうと思います。