Scroll-snap with sticky position on children seems broken on firefox

43 Views Asked by At

So I'm building a slideshow of sorts with the slides having position sticky set. Works pretty good on chrome and safari, but sucks on firefox. Maybe someone can help me out somehow? Scroll-snapping works great on all browsers when the child doesn't have position:sticky; set.

.slideshow-container {
  position: relative;
  overflow: scroll;
  height: 100vh;
  scroll-snap-type: y mandatory;
}

.slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100vh;
  width: 100%;
  position: sticky;
  top: 0;
}

slide:nth-child(4n + 1) {
  background-color: red;
}

.slide:nth-child(4n + 2) {
  background-color: blue;
}

.slide:nth-child(4n + 3) {
  background-color: green;
}

.slide:nth-child(4n + 4) {
  background-color: yellow;
}
<div class='slideshow-container'>
  <div class="slide">
    1. Slide
  </div>
  <div class="slide">
    2. Slide
  </div>
  <div class="slide">
    3. Slide
  </div>
  <div class="slide">
    4. Slide
  </div>
  <div class="slide">
    5. Slide
  </div>
  <div class="slide">
    6. Slide
  </div>
  <div class="slide">
    7. Slide
  </div>
  <div class="slide">
    8. Slide
  </div>
</div>

The snippet is pretty much the same functionality as my slideshow, it works on the way down, but not on the way up. Tho on the other mentioned browsers it works like a charm.

0

There are 0 best solutions below