1

I have a problem that occurs only on Safari mobile. On Chrome mobile it works as expected.

I'm writing a single page application. It's built of several containers. Only one is visible at a time. They are shown and hidden using jQuery show and hide functions. The containers may be (but not always are) build of sections. Each section should take the whole screen and user is switching between them by scrolling.

Basically code look like this:

html {
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: none;
}

.section {
    position: relative;
    max-width: 100vw;
    max-height: 100vh !important;
    scroll-snap-align: start;
    overflow: hidden;
}
<div class="container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>
<div class="container"></div>
<div class="container">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

What happens:

  1. User scrolls to third section in first conatiner
  2. The first container is hidden and the second is shown
  3. The second container is hidden and the third is shown

At this point the third section of the third container is displayed!

I assume that somehow browser holds the position of the scroll. This didn't happen until I implemented the snaps.

This can vary meaning sometimes after displaying the container it's at its beginning while sometimes the last section is presented.

I would like to have a control over what is presented to user. I would like to be always the first section by default but also to be able to start at the particular section defined in the js code.

Aninsi Sasberg
  • 7
  • 3
Rico
  • 362
  • 1
  • 4
  • 18

1 Answers1

0

I tried recreating it on Chrome, as I am not able to test it on iOS Safari, and suspect that it has to do with you not having any sections in your 2nd container. As scroll-snap-align is set on the sections and not the containers it searches for the next scroll point to align itself to which is the first section in the 3rd container.

    html {
        scroll-snap-type: y mandatory;
        overscroll-behavior-y: none;
    }

    .section {
        position: relative;
        min-width: 100vw;
        min-height: 100vh !important;
        scroll-snap-align: start;
        overflow: hidden;
    }
<div class="container">
    <div class="section">1.1</div>
    <div class="section">1.2</div>
    <div class="section">1.3</div>
</div>
<div class="container section">2</div>
<div class="container">
    <div class="section">3.1</div>
    <div class="section">3.2</div>
    <div class="section">3.3</div>
</div>
Aninsi Sasberg
  • 7
  • 3