rem Unit in Media Queries

メディア・クエリーでrem単位を使うと、Mobile Safari v10.3.2でブレークポイントの解釈がおかしくなるバグのテスト・ページです。

現象の説明と再現コード

rem単位を使ったメディア・クエリーが複数存在し、かつ最後のメディア・クエリー内でvw単位を使ってテキスト・サイズを変えると、ブレークポイントの解釈がおかしくなる。Mobile Safari v10.3.2で確認でき、以前のバージョンでは不明です。


@media (min-width: 60rem) {
  html {
    font-size: 200%;
  }
}

@media (min-width: 120rem) {
  html {
    font-size: 1vw;
  }
}

最小の再現コードは以上の通りです。min-width: 60remなのでiPhone 5sだとマッチしないはずだが、なぜかマッチし、文字サイズが200%になってしまいます。