我正在尝试制作一个页面布局，其中包含在导航到时可以滑入和滑出的部分。
每个部分都充满了屏幕（宽度/高度为100％），并且绝对以基于百分比的值定位。
在所附的样本中，有四个部分，其位置如下：
[一种]
[b] [c] [d]
其中[a]为0 0，[b]为0 100％，[c]为100％100％，[d]为200％100％。
现在，要实现导航，我将所有部分放置在100％x 100％绝对定位的溢出隐藏容器中。导航到某个部分时，容器的“ top”和“ left”值会设置为该部分偏移量的负值，例如如果选择[d]，则将容器设置为-200％-100％的动画。
奇怪的行为比比皆是！导航到0％偏移量（向左或向上）时，过渡效果很好。但是，其他组合（即负偏移量）会导致看似不合逻辑（但仍保持一致）的怪癖。
自己看看：http://www.doronassayas.com/ypsite
总结如下：
[a]或[b]的[c]和[d]正常工作。
[a]到[b]和[a]到[d]：跳到结尾，跳回到开头并开始动画。
[a]和[b]到[c]是最奇怪的-在过渡开始之前，整个主体（或其他一些高级元素？）弹出到一些视觉偏移，该偏移无法通过CSS跟踪（在Firebug和其他开发中不可见）工具）。因此，尽管CSS值清楚地表明我们应该位于[c]，但我们并没有以[c]结尾，而是以[d]（视觉上）结束。进行诸如在Firebug层次结构中单击之类的随机操作会将视图重置为正确的位置。 WTF？
在Firefox 4，Chrome 10和Safari 5中对此进行了测试，无论使用jQuery.animate（）还是Louis Remi's very cool jQuery.transition plugin，所有浏览器都会出现相同的行为，它们只是将-prefix-transition与新的偏移值一起应用于容器调用animate（）时。
陌生的一致性使我很感兴趣。有任何想法吗？
任何帮助，不胜感激。
最佳答案
经过大量的拉毛之后，我终于通过打开溢出：在body元素上自动诊断了越野车的行为。事实证明，带有负值的定位滑稽动作会严重破坏计算出的车身宽度和高度，该高度在过渡期间会不断变化（并且实际上不会停留在窗口的100％上，这是预期的行为）。结果是滚动条波动和body元素的滚动位置不正确，尽管在浏览器之间出乎意料的一致。
该解决方案非常简单：
body
{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
margin: 0;
}
我以前从未使用过的固定位置使body元素保持固定的大小和位置，而忽略其内容的任何更改。在那里，您拥有了！借助jQuery和Louis Remi，可爱的过渡，硬件加速得到了支持。