LoginSignup
27

More than 5 years have passed since last update.

posted at

updated at

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

フォントサイズを下記のように相対指定で書いた場合、稀に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;
}

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
27