Why 1rem bigger then 1.1rem, 1.2rem etc

Question

Text with font-size: 1rem bigger then it should be:

The problem reproduces only with all of this conditions:

ios
horizontal orientation
some text outside of span tag

HTML code:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
                .t5 { font-size: 0.5rem;}
                .t6 { font-size: 0.6rem;}
                .t7 { font-size: 0.7rem;}
                .t8 { font-size: 0.8rem;}
                .t9 { font-size: 0.9rem;}
                .t10 { font-size: 1.0rem;}
                .t11 { font-size: 1.1rem;}
                .t12 { font-size: 1.2rem;}
                .t13 { font-size: 1.3rem;}
                .t14 { font-size: 1.4rem;}
                .t15 { font-size: 1.5rem;}
            </style>
        </head>
        <body>
            Some text<br />
            <span class="t5">Test text 0.5</span><br />
            <span class="t6">Test text 0.6</span><br />
            <span class="t7">Test text 0.7</span><br />
            <span class="t8">Test text 0.8</span><br />
            <span class="t9">Test text 0.9</span><br />
            <span class="t10">Test text 1.0</span><br />
            <span class="t11">Test text 1.1</span><br />
            <span class="t12">Test text 1.2</span><br />
            <span class="t13">Test text 1.3</span><br />
            <span class="t14">Test text 1.4</span><br />
            <span class="t15">Test text 1.5</span><br />
        </body>
    </html>

what if you try `1rem;` instead of `1.0rem;`? – Temani Afif Feb 08 '20 at 10:04 — Temani Afif, Feb 08 '20 at 10:04

Ajit Panigrahi · Answer 1 · 2020-02-08T14:38:40.003

0

You might be having this issue where iOS scaling the font to readable size. Refer to this answer where you need to set -webkit-text-size-adjust: none;

edited Feb 08 '20 at 14:38

answered Feb 08 '20 at 10:13

Ajit Panigrahi

752
10
27

There are no "incomplete tags". You can check it with validator: validator.w3.org – Dima Pavlov Feb 08 '20 at 14:29
@DimaPavlov Did you try: `-webkit-text-size-adjust: none` ? – Ajit Panigrahi Feb 08 '20 at 14:36
I misunderstood what you meant by text outside san tag. You meant text not present within a tag but instead directly used alongside tags – Ajit Panigrahi Feb 08 '20 at 14:38

Why 1rem bigger then 1.1rem, 1.2rem etc

1 Answers1