CSS property scroll-snap-type prevent click with Firefox-CodePudding

My page have some sections with heights of 100vh and a smaller footer :

<!DOCTYPE html>
<html>
  <head>
    <title>Scroll Snap Y</title>
    <style>
      body {
        margin: 0;
        font-family: sans-serif;
        font-size: 40px;
      }
      main {
        scroll-snap-type: y mandatory;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: scroll;

        /* For old browsers */
        -webkit-scroll-snap-type: y mandatory;
        -ms-scroll-snap-type: y mandatory;
        scroll-snap-type-y: mandatory;
        scroll-snap-points-y: repeat(100%);
      }
      section,
      footer {
        display: grid;
        align-items: center;
        justify-content: center;
        scroll-snap-align: start;
      }
      section {
        height: 100vh;
      }
      section:nth-child(1) {
        background-color: #f00;
      }
      section:nth-child(2) {
        background-color: #0f0;
      }
      footer {
        background-color: #0ff;
        height: 25vh;
      }
    </style>
  </head>
  <body>
    <main>
      <section>1</section>
      <section>2</section>
      <footer>
        <a href="https://stackoverflow.com/" target="_blank">Stack Overflow</a>
      </footer>
    </main>
  </body>
</html>

It's perfect in Chrome and Safari, I scroll to the footer and I click on the link as expected :

Video screen capture in Chrome

But in Firefox, when I click anywhere in the footer the page scroll to the previous section (the green section on the picture), thereby I can't click on the link in the footer, it is impossible because the page scroll systematically to the previous section :

Video screen capture in Chrome

If the footer have 100vh of height, the page's behavior is good in Firefox but I want a small footer, I don't want a footer with 100vh of height.

Do you have any idea so that I can click on the links in the footer?

CodePudding user response：

I fixed this Firefox's bug by setting scroll-snap-align: end; for the footer.