【CSS】overflow-y: visible がスクロールになってしまう

縦方向へのoverflowのみを表示させようと、下記のようにcssを設定していたら、なぜかスクロールできるようになってしまいました。

.container {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

まさにこんな感じ。

どうやら片方にvisibleを設定し、もう片方にvisible以外の値を設定すると、visible側の設定はautoに変わってしまうバグのようです。

今回は下記のSolutionに倣って、paddingとmarginを相殺させるように設定したら直りました。

修正版:

.container {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  padding-bottom: 250px;
  margin-bottom: -250px;
}

iOSエンジニアのつぶやき