[Firefox] imgの縦横サイズが保たれない場合の対処法
状況
画像の遅延読み込みの為、srcに直接 URL を指定せずに data 属性に指定して、JavaScript で置き換える処理を行っていた。
<img data-src="https://example.jp/super.png" />
この img 要素にはheight / widthが指定されているが、Firefox においては縦横サイズが保たれずに、JS による src 置き換え後の画像ロード後に縦横サイズが決まるような動きであった。
Chrome や Safari では問題なし。
対処法
そもそもの原因
Firefox だと、img 要素に src が無い場合に「壊れた画像」として扱われ、縦横サイズを指定してもサイズが保たれないようである。（altの内容だけを表示される）
コード
srcにダミー画像をセットしておけば解決するが、下記のような CSS を指定する事でも解決する。
img {
-moz-force-broken-image-icon: 1;
}