iOS在初始加载时不会水平滚动

Question

好的，所以我在滚动时遇到了ios这个问题，而且我现在已经尝试调试了几天，而且我仍然没有接近解决方案。

问题

在iOS上首次加载页面时，预览/图像滚动条只是锁定（您无法滚动）。

它似乎非常有趣，因为有时候它不会工作，有时它会。

链接

https://wonderbly.com/personalized-products/lost-my-name-book/preview?name=Edwin&phototype=type-iii&base=&locale=en-US&gender=boy

https://wonderbly.com/personalized-products/my-little-monster-name-book/preview?name=Edwin&locale=en-GB&base=

https://wonderbly.com/personalized-products/the-birthday-thief-book/preview?name=Edwin&base=&locale=en-GB&gender=boy&phototype=type-iii

https://wonderbly.com/personalized-products/roald-dahl-my-golden-ticket-book/preview?name=Edwin&base=&surname=Joseph&locale=en-US&gender=boy

https://wonderbly.com/personalized-products/the-journey-home-book/preview?name=Edwin&base=&locale=en-GB&gender=boy&phototype=type-iii

重现的步骤

1. 在iOS上加载上述任何一个链接
2. 继续重新加载，直到预览无法滚动
3. 失败点

兴趣点

HTML：

<div class="scrolling-book-scrollable agitated-monkey" style="overflow: scroll;">
  <!-- Width changes depending on the amount of images -->
  <div class="scrolling-book" style="width: 10168px;"> 
    <!-- A lot of divs with images inside that get added client side and changes if you change the options -->
  </div>
</div>

CSS：

.scrolling-book-scrollable {
  height: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateZ(0px);
  -webkit-transform: translate3d(0,0,0);
  -webkit-perspective: 1000;
}

.scrolling-book-scrollable.agitated-monkey {
  .scrolling-book {
    animation: agitated 4s infinite $bezier-out forwards;
  }
}

@keyframes agitated {
  10% {
    transform: translateX(-20px);
  }
  20% {
    transform: none;
  }
}