Search code examples
cssgoogle-chromescroll-snap

Potential CSS Scroll Snap bug in Chrome (Windows). Two examples, only one work. Why?

I found two CSS scroll-snaps examples from csstricks.com. However, one of them does not work on Chrome on Windows.

What is the difference between the two examples? Why does one of them work, and not the other?

Example 1:

.container {
    flex-basis: 50%;
    max-height: 100vh;
    overflow-y: scroll;
    border: 1px solid gray;
    scroll-snap-type: y mandatory;
    &.proximity {
            scroll-snap-type: y proximity;
    }
}

li {
    border-bottom: 1px solid white;
    padding: 3rem;
    font-size: 1.4rem;
    color: rgba(white, .5);
    background: lightgray;
    text-align: center;
    scroll-snap-align: start;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

Example 2:

body {
    font-family: sans-serif;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
}
section {
    border-bottom: 1px solid white;
    padding: 1rem;
    height: 100vh;
    scroll-snap-align: start;
    text-align: center;
    position: relative;
}

Edit: Thanks to Kaiido for solving this issue. As a I suspected it also solved the problem I had on a project I have been working on. I have sent an email to csstricks.com to notify them about the bug.

Solution

  • Because by default the <body> doesn't scroll, <html> does.
    Change the selector to :root and it will work in Chrome.

    Though to be safe you'd be better defining your own scrolling area since older browsers were indeed using <body> as scrollingElement.