View Transitions API 页面向上滚动可见性问题

Question

我一直在探索 MPA 的新视图转换 API（目前处于实验阶段）。 当我添加视图转换元标记 t 页面时，当使用自定义视图转换名称时，它可以正常工作 - 例如。图像和标题移动到新页面上 - 但在任何其他情况下（使用默认交叉淡入淡出），旧/当前页面在过渡开始时明显向上滚动（页面内容快速闪烁） - 这是相当分散注意力的视觉错误 - 这会破坏整个过渡动画，而且我似乎找不到导致它的原因。

我尝试执行以下操作进行调试：

• 删除了所有javascript函数，旧的（当前）页面向上滚动仍然出现
• 尝试在转换时隐藏旧的或新的状态，仍然可见
• 尝试删除视图转换CSS规则后添加到新页面的所有CSS，但什么也没做
• 在网上找到任何东西，但它的 API 太新了，仍然标记为实验性

我不知道接下来该去哪里，我似乎无法理解当页面从每个 js 函数中剥离时会导致页面向上滚动的概念。

其他人以前遇到过这个问题吗？有什么解决办法吗？

Answer 1

您的滚动条在效果期间移动平滑还是跳跃？您看到的可能不是滚动，而是过渡组上的默认变形动画。为了进行快速测试，请将其添加到您的 CSS 中：

::view-transition-group(*) {
  animation: none;
}

如果现在“滚动”消失了，您之前看到的是（向上移动的）旧图像向下移动到新图像的位置，看起来页面会向上滚动。