font-size with undfined CSS variable on :root causes wrong rem unit #1138

MurakamiShinyu · 2023-03-05T13:52:12Z

Test sample:

<!doctype html>
<style>
:root {
  font-size: var(--font-size);
}
p:nth-child(2) {
  font-size: 1rem;
}
</style>
<body>
  <p>TEST (font-size is inherited from root)</p>
  <p>TEST (font-size: 1rem; should be same as above)</p>
</body>

このように、ルート要素に font-size プロパティが指定されているがその値がCSS変数でそのCSS変数が未定義である場合、Vivliostyle Viewerの文字サイズを変えるボタンで文字サイズを変えようとした場合、ルートから継承される本文の文字サイズはデフォルトの16pxのままで変わらない。しかし、それにもかかわらずrem単位の大きさは変わり、実際のルートの文字サイズとrem単位の大きさが合わない不具合が生じる。

HTML: https://gist.githack.com/MurakamiShinyu/f53a80755b2ebc3a31908c655aa26376/raw/root-font-size-var.html

Test with Vivliostyle Viewer:
https://vivliostyle.vercel.app/#src=https://gist.githack.com/MurakamiShinyu/f53a80755b2ebc3a31908c655aa26376/raw/root-font-size-var.html&fontSize=24/16

Screenshot:

MurakamiShinyu added the bug label Mar 5, 2023

MurakamiShinyu self-assigned this Mar 5, 2023

MurakamiShinyu mentioned this issue Mar 5, 2023

feat: Create base theme vivliostyle/themes#103

Merged

MurakamiShinyu removed their assignment Mar 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

font-size with undfined CSS variable on :root causes wrong rem unit #1138

font-size with undfined CSS variable on :root causes wrong rem unit #1138

MurakamiShinyu commented Mar 5, 2023

font-size with undfined CSS variable on :root causes wrong rem unit #1138

font-size with undfined CSS variable on :root causes wrong rem unit #1138

Comments

MurakamiShinyu commented Mar 5, 2023