font-sizeを可変にできない

前提・実現したいこと

font-sizeを可変にしたい。
firefoxはウィンドウサイズの幅をスーッと縮めると
スーッとっと文字サイズが変化していくので希望通りの挙動。

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

IE11で、ウィンドウサイズの幅をドラッグで縮めても
フォントサイズが変わらない。
ただしライブで変わらないだけで、再読み込みするとフォントサイズは変わっている。

safariはウィンドウサイズの幅をスーッと縮めると
カクカクっと文字サイズが変化していく。

該当のソースコード

css
1html {
2font-size: 1vw;
3}
4.test {
5font-size: 12rem;
6}

html
1<p class="test">TEST</p>

試したこと

「font-size　可変」で調べる。
該当のソースコードと同じremやvwを使った方法しか出てこず、IE11への言及は見つけられなかった。

そもそもIE11に対応する必要があるのかというところですが、
とりあえずmicrosoftサポート期間中の
https://blogs.windows.com/japan/2021/05/19/internet-explorer-11-desktop-app-retirement-faq/
の期限まではやりたいです。

Lhankor_Mhy

2021/05/21 07:09 編集

ご解決のようですが、当方の環境では問題が再現しませんでしたので、ご参考までに。 https://teratail-v2.storage.googleapis.com/uploads/contributed_images/5a9525c2bba910ef5740a2916ca1b07d.gif

kjshdfiuasye

2021/05/25 02:18

検証ありがとうございます。掲載している単純化したソースコードではなく、実際に問題が起きていたページで、今日IE11にて確認したら治っていました。ソースコードは変えていないのに不思議です。起きる時と起きない時があり、原因は迷宮入りのようです。もしかしたら起きたり起きなかったりするのは、読み込みに起因し、サーバーの応答が遅い時に可変にならなかったのかもしれません。

kjshdfiuasye

2021/05/25 02:33

mac safariでの問題は解決できましたので、回答欄に追加しました。

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

回答2件

mac safariのカクカク問題は解消できました。
body {font-size: 16px}としていたのが原因のようでした。
質問本文のソースコードでは簡略化しすぎて記載しておりませんでした。
大変失礼いたしました。

mac safariのカクカクは下記のコードで再現できます。

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        body {
11            font-size: 16px/*ここを削除するとsafariでカクカクせずスーッと可変になる*/
12        }
13
14        @media print,
15        screen and (min-width: 1000px) {
16            html {
17                font-size: 62.5%
18            }
19        }
20
21        @media screen and (max-width: 999px) {
22            html {
23                font-size: 1vw
24            }
25        }
26
27        .test{
28            font-size: 12.3rem;
29        }
30    </style>
31</head>
32
33<body>
34
35
36    <div class="test">TESTETETTE</div>
37
38</body>
39
40</html>

投稿2021/05/25 02:33

kjshdfiuasye

総合スコア25

kjshdfiuasye

2021/05/25 02:43

代替案としては body {font-size: 16px} を body {font-size: 160%} にするとよさそうです。(mac safariの検証ツールで検証済み)

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

ベストアンサー

自分では試していませんが、ウィンドウのサイズが変わったときにリペイントさせるようにしてみるとどうでしょうか。

JavaScript
1window.addEventListener('DOMContentLoaded', function(){
2  window.addEventListener('resize', function(){
3    var elements = document.getElementsByClassName('test');
4    elements = Array.from(elements);
5    elements.forEach(elem => elem.hide().show(););
6  });
7});