mac safariでfont-sizeがカクつく

前提・実現したいこと

希望1：ウィンドウ幅999px以下の時のみ可変のサイズの文字Aと、
どのウィンドウ幅でも固定の文字サイズにした文字Bを
1つのページで混在させたい。

希望2：要素自体にfont-sizeを指定していない場合は親要素(html,bodyは除く)のfont-sizeを継承させたい。(希望3より優先度高い)

希望3：親要素のセレクタにfont-sizeが指定されてない場合はどんなウィンドウ幅でも16pxにしたい。

発生している問題・エラーメッセージ

macのsafariで可変font-sizeにした文字Aが
999px以下にウィンドウ幅を縮めていくと
カクカクと縮まっていく。スーッと縮まるのが理想。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9    <style>
10
11        @media print,
12        screen and (min-width: 1000px) {
13            html {
14                font-size: 62.5%/*希望1の対応策*/
15            }
16            body {
17                font-size: 1.6em;/*希望3の対応策*/
18            }
19        }
20
21        @media screen and (max-width: 999px) {
22            html {
23                font-size: 1vw/*希望1の対応策*/
24            }
25            body {
26                font-size: 16px;/*希望3の対応策。こうするとmacSafariで.test1がカクつく*/
27            }
28        }
29
30
31        *{
32            font-size: 100%;/*希望2の対応策*/
33        }
34
35        .test1{
36            font-size: 12.3rem;
37        }
38    </style>
39</head>
40
41<body>
42
43
44    <div class="test1">TEST1</div><!--ウィンドウ幅999px以下で可変-->
45    <div class="test2">TEST2</div><!--font-sizeを16pxにしたい-->
46
47</body>
48
49</html>

試したこと

https://teratail.com/questions/339325
を質問した時の試行錯誤で、
body {font-size: 16px}
を
body {font-size: 160%}
や
body {font-size: 1.6em}
としたら治ったが、999px以下に縮めていくと文字がどんどん小さくなって読めなくなるという
別問題が発生したので新しく質問を投稿しました。

固定単位じゃダメだと思い、
font-sizeのcalcに可変単位であるvwを入れて改善しようと思ったのですが
割り算を使おうとすると
割る方の値に単位が使えなくて断念しました。

補足情報（FW/ツールのバージョンなど）

mac safari バージョン14.1.1

行動規範の内容に同意します

回答1件

ベストアンサー

不思議な現象ですね。。。
bodyのpx固定は外して、固定文字サイズにしたい箇所を個別指定ではダメですか？？

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9    <style>
10
11        @media print,
12        screen and (min-width: 1000px) {
13            html {
14                font-size: 62.5%/*希望1の対応策*/
15            }
16            body {
17                font-size: 1.6em;/*希望3の対応策*/
18            }
19        }
20
21        @media screen and (max-width: 999px) {
22            html {
23                font-size: 1vw/*希望1の対応策*/
24            }
25            body {
26                /* font-size: 16px;希望3の対応策。こうするとmacSafariで.test1がカクつく */
27            }
28        }
29
30
31        *{
32            font-size: 100%;/*希望2の対応策*/
33        }
34
35        .test1{
36            font-size: 12.3rem;
37        }
38        .test2 {
39            font-size: 16px;
40        }
41    </style>
42</head>
43
44<body>
45
46
47    <div class="test1">TEST1</div><!--ウィンドウ幅999px以下で可変-->
48    <div class="test2">TEST2</div><!--font-sizeを16pxにしたい-->
49
50</body>
51
52</html>

投稿2021/06/11 20:04

runnynose

総合スコア508

kjshdfiuasye

2021/06/14 01:11

ご回答ありがとうございます。前任者が、本文部分の要素ごとにfont-sizeを指定していないことが多くて、font-size未指定の本文要素が大量にあるため、更新の手間を省くために、bodyで指定しようと思った次第です。また、本文のfont-sizeは16pxにすることが多いため、デフォルトでそうなると便利かと思いました。ただ、remも同時に使うので、問題が複雑になってしまっています。機能を欲張りすぎたのかもしれません。