CSS Scrolling - snap into place?

I'm trying to implement vertical snap-into-place scrolling using CSS for a site, but having trouble getting it to work. To isolate the problem, I created this toy example:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            #container {
                scroll-snap-type: y mandatory;
            }
            .tile {
                height:100vh;
                width:100vw;
                scroll-snap-align: start;
            }
        </style>
    </head>
    <body>
    <div id="container">
        <div class="tile" style="background-color:red;">
        </div>
        <div class="tile" style="background-color:blue;">
        </div>
        <div class="tile" style="background-color:green;">
        </div>
        <div class="tile" style="background-color:yellow;">
        </div>
    </div>
    </body>
</html>

However everything still scrolls freely. Where am I going wrong? Thanks!