CSS only scroll snap in iOS

Question

I am trying to achieve CSS only scroll-snap behaviour in an app but see that it doesn't work as expected in iOS. Here is link to CodePen that demo the case.

The code is enclosed below

body, html {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.panel-container {
  width: 100%;
  height: 50%;
  border: 2px solid lightgray;
  box-sizing: content-box;
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-snap-type: mandatory;
  scroll-snap-points-x: repeat(100%);
  scroll-snap-destination: 0 0;
}
.panel {
  scroll-snap-align: start;
  border: 2px solid;
  box-sizing: border-box;
  min-width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.one {
  border-color: red;
}
.two {
  border-color: blue;
}

<div class="panel-container">
  <div class="panel one">
    One
  </div>
  <div class="panel two">
    Two
  </div>
</div>

I included a few redundant CSS rules that I've learned in corresponding MDN page, nut I also tried without them with no luck.

I suspect that there the issue is caused because of combination of flex and scroll-snap but I'm not sure that it is the case.

PS: There are a few threads in SO discussing scroll-snap issues. One of them combines JS + CSS which is not exactly what I'm trying to do.

Answer 1

The container needs -webkit-overflow-scrolling: touch and the children overflow:visible (which they already have in your case).