Issue with Scroll Snap When Screen Size Changes and Navbar Toggles in Browser

Question

I'm encountering an issue with scroll snap in my web project. Whenever the screen size changes, such as when the mobile browser navbar is toggled open or closed, the scroll snap behavior gets messed up. Even when I return to the top of the page, the snap doesn't work properly. I've been struggling with this for a few days now and haven't found a solution. Could someone please help me troubleshoot this problem?

Here's a sample of the code I'm using:

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
main {
  max-width: 390px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
}
.container {
  top: 0;
  position: sticky !important;
  margin: auto;
  border-radius: 15px;
  height: 100lvh;
  max-width: 390px;
  width: 100%;
  font-size: 48px;
  scroll-snap-align: start;
  font-size: 48px;
}
.container:nth-child(1) {
  background-color: red;
}
.container:nth-child(2) {
  background-color: blue;
}
.container:nth-child(3) {
  background-color: bisque;
}
.container:nth-child(4) {
  background-color: rgb(0, 255, 0);
}
.container:nth-child(5) {
  background-color: rgb(0, 255, 242);
}

<main>
    <div class="container">1</div>
    <div class="container">2</div>
    <div class="container">3</div>
    <div class="container">4</div>
    <div class="container">5</div>
</main>

https://codepen.io/norouzy/pen/wvONEev
https://scroll-snap-smoky.vercel.app/

I'm seeking assistance in understanding how to maintain scroll snap functionality even when the browser navbar is toggled. Any insights or suggestions would be greatly appreciated. Thank you!

Answer 1

I have tried to implement stacking cards effect for a very long time now, what I have found out is that Chromium based browsers have the bug and it is a known issue and bug is reported, https://issues.chromium.org/issues/41384643

Safari does not have this issue, so you may have a partial implementation of the effect.