Chrome 43における擬似要素のdisplayプロパティー

Chrome 43で擬似要素に指定したdisplay: table-cellがうまく反映されないことがあった。当初はうまく再現できなかったが、どうもメディア・クエリーを使ってdisplayプロパティーを切り替えており、かつブラウザーをリサイズするなどして能動的に切り替わった時にのみ起こるようだ。

Demo: Pseudo Display on Resize

デモではul要素に対して::before擬似要素を使って「lorem」という単語を、それ以下の単語はli要素に直接記述している。それらをすべてdisplay: blockにし、メディア・クエリーを使って幅640px以下の場合にdisplay: table-cellになるようにしてある。ブラウザーのウィンドウ幅を640px以下に変えた場合、横並びに切り替わるはずだが、Chrome 43でのみ擬似要素に指定した「lorem」という単語のみが意図通りに横並びへ変わらない。

ただしChrome 43でも幅640px以下の状態で再読み込みした場合は意図通りに横並びになる。そのため実害はほとんどない。強いて言うのならデバイスの向きが変わった時に切り替わるようなメディア・クエリーを書いているとハマるが、ほぼその場合のみだろう。

簡単なCSSプロパティーの追加などで可能な回避方法は見つけることはできなかった。displayプロパティーを使う代わりに、white-space: preと改行コードLFを組み合わせたりするなど、根本的にアプローチを変える必要がある。