Chromeでfont-sizeを相対指定したとき、フォントサイズが大きく表示されることがある

  • 22
    Like
  • 1
    Comment
More than 1 year has passed since last update.

フォントサイズを下記のように相対指定で書いた場合、稀にChromeでフォントが異常な大きさになることがある。
(62.5%が無視され、100%に対して1.6remされるように見える)

html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}

このようなときは、

* {
  font-size: 1.6rem;
}

または、

<script>
  document.body.style.webkitTransform = "scale(1)";
</script>

で回避できる。

Chrome not respecting rem font size on body tag?
Force-redraw DOM technique for WebKit-based browsers

--
追記

コメント頂きました。指摘の書き方が良さそうですし、スマートですね。有難うございます。

body {
  font-size: 1.6em;
}