Почему мои точки привязки CSS не действуют?

Question

Точки привязки CSS поддерживаются в последних версиях Chrome и Safari, но по какой-то причине моя реализация (← ссылка на CodePen, чтобы вы могли ее попробовать) не прерывается.

Мне кажется, что я упускаю что-то очевидное.Любая помощь приветствуется!

HTML:

<div id="treats"><a class="treat"><span>?</span></a><a class="treat"><span>?</span></a><a class="treat"><span>?</span></a><a class="treat"><span>?</span></a><a class="treat"><span>?</span></a></div>

CSS:

body {
    font: 16px/1.5 Helvetica, Sans-Serif;
    margin: 0;
    overflow-y: hidden;
    padding: 0;
    text-align: center;
}

#treats {
    height: 100vh;
    scroll-snap-type: x mandatory;
    width: 500vw;
}

.treat {
    display: inline-block;
    font-size: 50vw;
    height: 100vh;
    scroll-snap-align: center;
    text-shadow: rgba(0, 0, 0, 0.25) 0 0.25em 0.25em;
    transition: all 0.25s;
    width: 100vw;
}
    .treat:active {
        text-shadow: rgba(0, 0, 0, 0.25) 0 0.1em 0.1em;
        transform: translate3d(0, 0.025em, 0);
    }
    .treat span {
        display: block;
        margin-top: 33vh;
    }

.treat:nth-child(1) {
    background-color: #ffabab;
}
.treat:nth-child(2) {
    background-color: #ffdaab;
}
.treat:nth-child(3) {
    background-color: #ddffab;
}
.treat:nth-child(4) {
    background-color: #abe4ff;
}
.treat:nth-child(5) {
    background-color: #d9abff;
}

Answer 1

Благодаря изучению комментария @SahilDhir, я смог заставить это работать.Мое решение немного отличается от его, поэтому я публикую его ниже.В частности, мне нужно только поддерживать iOS, поэтому я вынул некоторые из кросс-браузерных CSS.Я также использовал grid вместо flex для настройки своих ящиков.

body {
    font: 16px/1.5 Helvetica, Sans-Serif;
    margin: 0;
    overflow: hidden;
    padding: 0;
    text-align: center;
    width: 100vw;
}

#treats {
    display: grid;
    grid-template-columns: 100vw 100vw 100vw 100vw 100vw;
    height: 100vh;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    width: 100vw;
}

.treat {
    font-size: 50vw;
    height: 100vh;
    scroll-snap-align: start;
    text-shadow: rgba(0, 0, 0, 0.25) 0 0.25em 0.25em;
    transition: all 0.25s;
    width: 100vw;
}
    .treat:active {
        text-shadow: rgba(0, 0, 0, 0.25) 0 0.1em 0.1em;
        transform: translate3d(0, 0.025em, 0);
    }
    .treat span {
        display: block;
        margin-top: 33vh;
    }

.treat:nth-child(1) {
    background-color: #ffabab;
}
.treat:nth-child(2) {
    background-color: #ffdaab;
}
.treat:nth-child(3) {
    background-color: #ddffab;
}
.treat:nth-child(4) {
    background-color: #abe4ff;
}
.treat:nth-child(5) {
    background-color: #d9abff;
}

Вот обновленный CodePen , показывающий его в действии .