WWW Watch

Firefox の srcset 属性実装は sizes 属性を省略すると正常に動作しないらしい

Firefox 32 から試験的に実装された srcset 属性ですが、現時点では、sizes 属性が省略されると、srcset 属性の指定に関係なく、srcset 属性値に最初に記述された画像が表示されてしまうという問題があるようです。

Firefox Nightly1つ前の記事で picture 要素 や srcset 属性に関して書いた課程で知ったんですが、Firefox (テストしたのは Firefox Nightly 34.0a1) の srcset 属性実装に関して、sizes 属性を省略したときに正しく動作しない問題があるようです。Bugzilla@Mozilla に報告されていました。

srcset 属性の実装状況

srcset 属性は、近々正式リリースされる、Firefox 32 で試験的に実装されていますが、今回テストしたのは Firefox Nightly (34.0a1) です。まだ試験的な実装のため、dom.image.srcset.enabled および dom.image.picture.enabledtrue にする必要があります。

Firefox 以外でも、Google Chrome Canary (現在 v38.0.2125.0)Opera Developer (現在 v25.0.1592.0) ではデフォルトでサポートされているほか、WebKit (Nightly Builds) も実装済み。

まだ、各ブラウザでの実装は開発者向けバージョンにおける実装ではありますが、近いうちには正式リリース版でも利用可能になりそうです (ちなみに Internet Explorer は実装を検討中という状態)。

Firefox での問題の挙動

実験的な実装段階であれこれ言うのもなんですが、報告されていた問題の挙動は下記の通りです。

まず、下記のようなサンプルソースを用意して、対応するブラウザで表示したとします。

<img src="default.png" srcset="small.png 480w, medium.png 640w, large.png 1440w" alt="Sample Picture" />

この時、期待される動作としては、

  1. srcset 属性に対応していない場合は default.png を表示
  2. Viewport が 480px 以下の場合、small.png を表示
  3. Viewport が 640px 以下の場合、medium.png を表示
  4. Viewport が 1440px 以下の場合、large.png を表示 (これ以上の指定がないので、1440px 以上は large.png を表示)

となります。実際に、Chrome Canary 等では意図した通りの表示に。

また、サンプルソースのように sizes 属性が省略された際は、仕様上、100vw がデフォルト値となりますが、これも意図した通りに表示されています。

しかし、Firefox の場合は、sizes 属性が省略されると、srcset 属性の指定に関係なく、srcset 属性値に最初に記述された画像が表示されてしまうようです。

下記のように Viewport が 980px の場合、期待されるのは large.png が表示されることなんですが、small.png が表示された状態で固定されてしまいます。

Firefox における srcset 属性の挙動。sizes 属性が省略されると、指定に関係なく、srcset 属性値に最初に記述された画像が表示されてしまう

試しに下記のように small.png と medium.png の指定を入れ替えてみましたが、今度は medium.png が Viewport に関係なく表示されるようになりましたので、「srcset 属性値に最初に記述された画像が表示されてしまう」 という挙動で間違いなさそう。

<img src="default.png" srcset="medium.png 640w, small.png 480w, large.png 1440w" alt="Sample Picture" />

ちなみに、下記のように、sizes 属性を指定すると、他のブラウザ同様、意図した通りに動作するようになります。

<img src="default.png" srcset="small.png 480w, medium.png 640w, large.png 1440w" sizes="100vw" alt="Sample Picture" />

下記にテストページが用意されていますので、実際の挙動を確認できます。

関連エントリー

Recent Entry

全ての記事一覧を見る

Hot Entry

逆引きおすすめエントリー