在移动设备上用鼠标滚动/滑动不起作用

Question

我在滚动/滑动图块时遇到问题。我使用CSS网格，我有一个div容器，其中有几个子div。

<div class="container">
 <div class="child">child</div>
 <div class="child">child</div>
 <div class="child">child</div>
 <div class="child">child</div>
</div>

和.container的CSS

display: grid;
grid-template-rows: repeat(1, 89%);
grid-template-columns: repeat(4, 50%);
overflow-x: scroll;
grid-auto-flow: column;
align-items: center;

在Chrome的iphone和移动模式下，滚动无法使用。有趣的是，水平滚动仅在我在键盘上使用箭头键时有效。

有什么建议吗？

首先在gif上，我尝试用鼠标滑动，然后使用键盘。