2

我正在尝试制作一个页面布局，其中包含在导航到时滑入和滑出的部分。每个部分都填满屏幕（100% 宽度/高度），并以基于百分比的值绝对定位。

在随附的示例中，有四个部分，位置如下：

[一个]
[b][c][d]

其中 [a] 为 0 0，[b] 为 0 100%，[c] 为 100% 100%，[d] 为 200% 100%。

现在，为了实现导航，我将所有部分放置在一个 100% x 100% 绝对定位的溢出隐藏容器中。当导航到某个部分时，容器的“顶部”和“左侧”值会动画到该部分偏移量的负值，例如，如果选择 [d]，则容器会动画到 -200% -100%。

奇怪的行为比比皆是！当导航到 0% 偏移量（向左或向上）时，转换工作正常。然而，其他组合（即负偏移）会导致看似不合逻辑（但始终如一）的怪癖。

亲自查看：http: //www.doronassayas.com/ypsite

这是一个摘要：

  • [c] 和 [d] 到 [a] 或 [b] 都可以正常工作。
  • [a] 到 [b] 和 [a] 到 [d]：跳到结尾，跳回到开头并开始动画。
  • [a] 和 [b] 到 [c] 是最奇怪的 - 在过渡开始之前，整个主体（或其他一些高级元素？）弹出到一些无法通过 CSS 追踪的视觉偏移（在 Firebug 和其他开发中不可见工具）。因此，我们不是在 [c] 处结束，而是在 [d] 处结束（视觉上），即使 CSS 值清楚地表明我们应该在 [c] 处。执行随机操作（例如单击 Firebug 层次结构）会将视图重置到正确的位置。怎么回事？

在 Firefox 4、Chrome 10 和 Safari 5 中对此进行了测试，并且在所有浏览器中都出现了相同的行为，无论是使用 jQuery.animate() 还是Louis Remi 非常酷的 jQuery.transition 插件，它只是将 -prefix-transition 应用于容器调用 animate() 时使用新的偏移值。

陌生感的一致性让我很感兴趣。有任何想法吗？

非常感谢任何帮助。

4

1 回答 1

1

经过相当多的拉扯后，我终于通过打开溢出来诊断错误行为：身体元素上的自动。事实证明，具有负值的定位滑稽动作会对计算出的身体宽度和高度造成严重破坏，这在转换过程中会不断变化（实际上从未停留在 100% 的窗口上，这是预期的行为）。结果是滚动条波动和 body 元素的滚动位置不正确，尽管在浏览器中惊人地一致。

解决方案非常简单：

body
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

我以前从未使用过的固定位置使 body 元素保持固定的大小和位置，同时忽略对其内容的任何更改。你有它！得益于 jQuery 和 Louis Remi，可爱的过渡，硬件加速。

于 2011-05-03T22:33:54.720 回答