CSS iOS Safari 対策

概要

iOS Safari が原因だと思われるUI崩れの現象や、原因、対策をメモしていく。

未消化

• https://note.com/takamoso/n/n32c4e6904cf7#VGTrC

現象

overflow あたりで悪さする。
（もうちょっと絞る必要がある）

候補

• あれ？、flex + break-word の話か？
• overflow + absolute 回りか？

原因

min-inline-size: auto; の挙動が iOS Safari の時異なるため

対策

*,
*::before,
*::after {
  /* box-sizing: border-box; */
  min-inline-size: 0;
}

参考

• https://qiita.com/mpyw/items/dfc63c1fed5dfc5eda26

テンプレート

現象

原因

対策

参考

現象

??

原因

iOSでも100vh

対策

block-size: 100svb;

参考

• https://zenn.dev/tak_dcxi/articles/2ac77656aa94c2cd40bf

テンプレート

現象

iOS Safari で input をクリックすると、拡大する。

原因

input font-size が 16px 以下である。

対策

font-size: 16px; 以上にする。
別記事 で、zoom と組み合わせられるとあり試したが、うまくいかなかった。

参考