<s>未解決: </s>Android版Google Chromeは本文が245文字以上か未満かで文字サイズが変わる、そして245文字以上の場合で`position: absolute;`のstyleを持つ文字サイズは小さくなる - 木俣ロバート久の覚書

~~本記事は不具合の再現手順を説明するだけで解決方法の説明はありません~~

meta要素のviewportを設定することで問題が解消することが分かりました

以下、憶測ですが、スマートフォンなどの小さい画面で表示し、meta要素のviewportがない場合、内部的にviewport相当の設定され、かつ、その時特定の設定 (position: absolute;のstyle) を持つ文字にはその設定が有効になっていないため、文字サイズが変化するものと思われます

要点を箇条書きに

記事名の通りですが、我ながら何を言っているか大変分かりにくいので箇条書きにしてみます

以下を現時点Android版Google Chromeで確認した
Desktop版Google ChromeでもデベロッパーモードにしてAndroidのモードにすると確認できる
本文 (Body要素内のtext node）が合計245文字以上か未満かで文字サイズが変わる
この244文字/245文字の境界は、ASCII文字でもマルチバイト文字でも変わらない
245文字以上の場合で position: absolute; のstyleを持つ文字は小さくなる

やっぱりわかりにくいです

Test Case

244 Characters in body and position absolute contents text.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>244 Characters in body and position absolute contents text.</title>
    <style>
    p::before {
      position: absolute;
      content: 'ABCDEFGHIJ ';
    }
    </style>
  </head>
  <body>
    <p title='Char 001-100'>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p>
    <p title='Char 101-200'>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p>
    <p title='Char 201-244'>12345678901234567890123456789012345678901234</p>
  </body>
</html>

245 Characters in body and position absolute contents text.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>245 Characters in body and position absolute contents text.</title>
    <style>
    p::before {
      position: absolute;
      content: 'ABCDEFGHIJ ';
    }
    </style>
  </head>
  <body>
    <p title='Char 001-100'>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p>
    <p title='Char 101-200'>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</p>
    <p title='Char 201-245'>123456789012345678901234567890123456789012345</p>
  </body>
</html>

これをDesktop版Google Chromeの検証 (I)で表示してAndroid版として描画すると以下の様になります

f:id:rh-kimata:20190411212510p:plain

ちなみに、本文がASCII互換以外の文字、例えば漢字で 一二三四五六七八九〇... となっている場合も245文字以上か未満かで同じ現象が起こります

そもそも何でこんなことを調べたのか

元は別サイトで p 要素を li 要素みたいにカウンターを付けたくてそういうCSSを書いて Android版Google Chromeで表示してみたら content: counter(paragraph) ". "; として生成したカウンターが読めないほど小さく表示され、色々調査した結果行きつきました

とりあえず、Google Chromeのバグっぽいので良かった、俺のせいじゃないと言う事で今回は良しとします (良くない)