Нет привязки прокрутки с scroll-snap-type-type и -align / Простой пример не работает Chrome / Firefox /

Question

Используя Chrome / Firefox, я создал контейнер (.container) для пары изображений (элементы списка с классом img).Я добавил scroll-snap-type на контейнер.Я добавил scroll-snap-align для элементов с классом img.

Что мне здесь не хватает?

HTML

<div class="container">
  <ul>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  <li class="img"><img src="https://picsum.photos/500"></li>
  </ul>
</div>

CSS

.img {
  margin: 10px 5px;
  scroll-snap-align: center;
  -webkit-overflow-scrolling: touch;
}

.container {
  display:  grid; 
  justify-content: center; 
  grid-gap: 10px;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
}