嘿Webflow家人,

我的项目中有一个奇怪的与ios相关的问题。

我的目标是:

  • 我想使用css滚动snap
  • 我需要三个部分
  • 我需要在滚动时动画对象,即在三个部分之间切换

我让它在台式机上工作,但它不能在我的任何iOS设备上工作(iPad Pro 10.5英寸运行iOS 15.2, iPhone 11 Pro iOS 15.5),无论我使用哪种浏览器。

请查找只读示例在这里

现场网站:https://example-08de86.webflow.io

结构很简单:

  • 身体
    ——|内容
    ——| .scroller-wrapper
    ——| .scroller-section
    ——| .scroller-section
    ——| .scroller-section

我在第二个.scoller部分有一个“while scroll in view”动画,它在x方向上移动内容。

以下是我目前的发现:

  • 我很确定这是iOS特有的问题
  • 有些事情是错误的,要么在我的项目与溢出的divs或有一个错误的iOS设备
  • 在只读项目中,我的Body的overflow被设置为隐藏,.scroll -section的overflow被设置为滚动。我想使用这些溢出设置,因为css滚动抓拍。
  • 当我在桌面上测试交互时,它工作得很好,然而在我的iOS设备上动画没有被触发-见下面的动图。

IMG_5248_MOV_AdobeExpress (1)

有人见过这种行为吗?任何建议都非常感谢。