font-sizeをremで指定していると、Google Chromeでたまに文字サイズが大きく表示される

font-sizeをrem指定でコーディングしていた時、Google Chromeでたまに文字サイズが大きく表示されてしまう現象に遭遇したので、調べたことをメモしておきます。

原因

htmlに指定しているfont-size: 62.5%;がGoogle Chromeでたまに指定できないことがあり、文字サイズが大きくなってしまうようです。

CSS

html {
	font-size: 62.5%;
}
body {
	font-size: 15px;
	font-size: 1.5rem;
}

解決方法

bodyのフォントサイズ指定をremからemに変更することで対応できるようです。

CSS

html {
	font-size: 62.5%;
}
body {
	font-size: 15px;
	font-size: 1.5em;
}

他にも対応方はあるようですが、これが一番スマートかと思います。
　

【参考サイト】

• CSS3 – Chromeでfont-sizeを相対指定したとき、フォントサイズが大きく表示されることがある – Qiita
• html – Chrome not respecting rem font size on body tag? – Stack Overflow