モードの変更

Google Chrome 40でreversed属性のついたol要素のカウンターがおかしい

HTML

※2015/3/3 追記あり

別にバグ報告ブログをやっているつもりはないのだけどたまたま見つけたので記事にする。

HTML5 では ol 要素に reversed 属性をつけるとリストが降順のものとして意味づけられ、list-item のカウンターの数値が逆順で表示されるようになる。

この「reversedのついた ol」が中にさらにリストを持つとき(入れ子リストのとき)、Google Chrome 40 でカウンターの表示がおかしくなるバグに気づいた。言葉で説明すると、入れ子にしている li の個数も全て合計した数値で降順にカウンターが表示されるというもの。わかりづらい。

問題のマークアップはこう。

<ol reversed>
  <li>快晴</li>
  <li>晴れ
    <ol reversed>
      <li>薄曇</li>
      <li>曇り
        <ol>
          <li>煙霧</li>
          <li>砂塵嵐</li>
          <li>地吹雪</li>
        </ol>
      </li>
      <li>霧</li>
      <li>霧雨</li>
    </ol>
  </li>
  <li>雨
    <ol>
      <li>みぞれ</li>
      <li>雪</li>
      <li>霰</li>
      <li>ひょう</li>
    </ol>
  </li>
  <li>雷</li>
</ol>

Google Chrome 40.0.2214.94 (64-bit)と Firefox 35.0.1 で表示したスクリーンショットを以下に載せる。

counterの数値が大きい

counterの数値が適切

Chrome では一番親の ol のカウンターが 15 から始まり 12 で終わっている。Firefox だと一番親の ol のカウンターは上から 4,3,2,1 となっている。15 は親の ol 要素の中の全ての li 要素の合計数だ。li をどこかに増やすとその分カウンターの数値も増える。

他のブラウザでは見ていないが、reversedがついていない通常の昇順リストで考えれば、一番親の ol のカウンターが 12 から始まって 15 で終わっていたらおかしいのだから、やはり入れ子分の li は数えずに同階層の li の個数分だけがカウンターの数値になるのが正しい表示だと思う。

HTML5 の reversed 属性をもつ ol の仕様日本語訳)を見てみたけど入れ子した時のカウンターについての記述は特にないようだ。入れ子にしている ol を ul に変えたりしてもかわらなかった。とにかくreversedを持つ ol に入れ子リストがあると Google Chrome 40 でおかしくなる。42.0.2306.0 canary でも同様の現象が確認できた。


一般的なウェブ制作ではリスト要素のカウンターやリストマーカーをそのまま使うことはあまりないし、さらに reversed のついた ol で入れ子でリストを含むとなると巷での再現性はさらに下がるだろう。カウンターもlist-style-type: none;にしてしまっている場合がほとんどだと思う。印刷用 CSS で list-item のカウンターをノーマライズして初めて露見する程度だろうか。Chrome 限定のバグっぽいので今後も気にする必要は出てこない気がする。

zoom のバグのように発生条件がレアなものは修正されずに長い間放置されてもおかしくないが、Chromium Project の issue で探したらバグレポートはちゃんとあった。2014 年 11 月 11 日にレポートがあり、当時の Chrome 41 と Chrome 38 で再現可能だったようだ。ステータスは今年の 1 月 6 日ですでに fixed になっている。手元の canary で再現するのは Chrome 42 にマージが間に合わなかったからだろうか。43 で直っていたら忘れずに追記したい。

ちなみに先の ISSUE ではこのサンプル HTML がリンクされていた。Chrome でみてもらえば、上記のスクリーンショットのようにカウンターがおかしいのが確認できる。reversed がつくだけでこうなってしまうんだからブラウザも大変なんだなと思った。


※2015/3/3 追記。Google Chrome 43 canary が公開されたので確認したところ、バグは修正されていた。めでたしめでたし。

カウンターの数値が適切に表示されるようになったGoogle Chrome 43 canary