犬ターネット

Firefoxでvideoタグのコントロールインターフェースがズレる

2017-05-12 firefox html5 css

「videoタグにcontrols属性を記述」かつ「styleにwhite-space: pre-wrap;」の場合に、コントロールインターフェースがズレて表示される。Firefox53で確認。以下サンプル。


ここにテキスト
ここにテキスト
ここにテキスト
ここにテキスト

ここにテキスト
ここにテキスト
ここにテキスト
ここにテキスト


ソースは以下。

<p>ここにテキスト<br />ここにテキスト<br />ここにテキスト<br />ここにテキスト<br /></p>
<p><video style="border:2px solid #000;" src="/dummy.mp4" preload="none" controls></video></p>
<p><video style="border:2px solid #000; white-space: pre-wrap;" src="/dummy.mp4" preload="none" controls></video></p>
<p>ここにテキスト<br />ここにテキスト<br />ここにテキスト<br />ここにテキスト<br /></p>

画面キャプチャをとるとこんな具合。

そのうち直るかなあ。

ETYMOTIC RESEARCH ER20XS-CCC-P (耳栓)
HTTPリクエストヘッダのHOSTを改ざんする