Chrome 56 で画像ページがセンタリングされるようになった
◆ センタリング方法が凄く気になる
Chrome 55 までで画像のページを開くとこんな感じでした
DOM はこんなの
それが Chrome 56 からは
背景が黒くなってセンタリングされています
さらに背景が透明かがわかるようにおなじみの市松模様になってます
DOM は background 関係の style が追加されています
これを見て思うのはセンタリングのスタイルがない ですよね
body を書き換えて見ると
なぜか body に a だけなのにセンタリングされています
↑ これで再現できます
HTML/CSS だけじゃない領域で設定がありそう な気がします
ですが ↓ を試すと
左上に a がある普通の表示でした
body が怪しいので
として別の body と置換してみます
すると b が左上に表示されました
ということは
「この body」 要素がセンタリングするようになってる
ということです
Chrome 内部で特殊な処理がされているのか ユーザがいじれるところにセンタリングになるプロパティがあるのかどっちなんでしょうか
ざっと新規 body とセンタリングされた body のプロパティの違いを dir(document.body) で見てみても違いはみつかりませんでした
再度 replaceWith で戻すとまたセンタリングされた状態だったので body 自体がセンタリングされた状態を表す何かを持ってるのは確かなはずです
DOM はこんなの
それが Chrome 56 からは
背景が黒くなってセンタリングされています
さらに背景が透明かがわかるようにおなじみの市松模様になってます
DOM は background 関係の style が追加されています
これを見て思うのはセンタリングのスタイルがない ですよね
body を書き換えて見ると
なぜか body に a だけなのにセンタリングされています
document.body.innerHTML = "a"
↑ これで再現できます
HTML/CSS だけじゃない領域で設定がありそう な気がします
ですが ↓ を試すと
document.documentElement.innerHTML = "a"
左上に a がある普通の表示でした
body が怪しいので
document.body.innerHTML = "a"
のあとでvar b = document.createElement("body")
b.innerHTML = "b"
document.body.replaceWith(b)
b.innerHTML = "b"
document.body.replaceWith(b)
として別の body と置換してみます
すると b が左上に表示されました
ということは
「この body」 要素がセンタリングするようになってる
ということです
Chrome 内部で特殊な処理がされているのか ユーザがいじれるところにセンタリングになるプロパティがあるのかどっちなんでしょうか
ざっと新規 body とセンタリングされた body のプロパティの違いを dir(document.body) で見てみても違いはみつかりませんでした
再度 replaceWith で戻すとまたセンタリングされた状態だったので body 自体がセンタリングされた状態を表す何かを持ってるのは確かなはずです
