在iOS7中使用skrollr，skrollr-menu的视差站点存在问题

Question

我正在使用skrollr.js和skrollr-menu创建视差网站。 我有3个具有嵌套元素的div，我想以不同的速度进行视差处理。 一切都可以在桌面上正常运行，但是在运行iOS 7的iPad上，元素的放置方式和滚动速度遇到问题。 3个不同的div具有一类位置：固定，嵌套元素具有一类位置：绝对； 并使用top：px位于Y轴上（尝试使用％代替混合结果）。 其他（非嵌套的，即#content）div似乎在所有浏览器和设备上均能正常工作。 我真的很感激任何问题的帮助，它使我发疯了好几天，这是我的第一个使用skrollr的项目，所以我没有太多经验，但是到目前为止，我很喜欢它，除了iOS上的这个小故障，我已经检查了文档和stackOverflow中的相关问题，但还是没有运气！ 希望有人能够向我指出正确的方向，这是我试图实现这一目标的方法的一个小提琴，尽管要在iOS中看到它，我必须很快提供一个直接指向该项目的链接，请耐心等待，因为我已经将现有项目移植到移动设备上以与skrollr一起使用，以便在提交之前尽可能多地清理代码以避免混淆，与此同时，这是小提琴：

//Init Skrollr

$（document）.ready（function（）{var s = skrollr.init（{forceHeight：false，smoothScrolling：true，smoothScrollingDuration：150}）;

    skrollr.menu.init(s, {
        easing: 'outCubic',
        animate: true,
        duration: 1000

}）; }）;

http://jsfiddle.net/shinobisan/EvPdL/6/

谢谢！！

Answer 1

在移动设备上，使用CSS变换移动skrollr-body元素，这会破坏固定位置的元素。 请阅读文档的这一部分，我在第二段中对此进行了扩展。

从skrollr 0.6.0开始，您只需要做一件事：在页面上包含ID为skrollr-body的元素。 这就是我们为了假冒滚动而移动的元素。 唯一的情况是，您不需要＃skrollr-body时就可以独家使用位置：fixed。 实际上，skrollr网站不包含＃skrollr-body元素。 如果您需要固定和非固定（即静态）元素，请将静态元素放入＃skrollr-body元素中。

或者换句话说：在移动设备上，使用CSS变换移动skrollr-body元素。 您不能在根据CSS规范使用CSS变换的内部元素中具有position：fixed或background-attachment：fixed元素（ http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements -with-css-transforms / ）。 这就是为什么这些元素需要在skrollr-body元素之外的原因。

https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers