Мобильная версияПривязка прокрутки с липким положением для детей кажется сломанной в Firefox ⇐ CSS
-
Anonymous
Привязка прокрутки с липким положением для детей кажется сломанной в Firefox
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?
.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(n + 1) { background-color: red; } .slide:nth-child(n + 2) { background-color: blue; } .slide:nth-child(n + 3) { background-color: green; } .slide:nth-child(n + 4) { background-color: yellow; } 1. Slide 2. Slide 3. Slide 4. Slide
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.
Источник: https://stackoverflow.com/questions/781 ... on-firefox
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?
.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(n + 1) { background-color: red; } .slide:nth-child(n + 2) { background-color: blue; } .slide:nth-child(n + 3) { background-color: green; } .slide:nth-child(n + 4) { background-color: yellow; } 1. Slide 2. Slide 3. Slide 4. Slide
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.
Источник: https://stackoverflow.com/questions/781 ... on-firefox
