google-chrome - 页面滚动时 CSS3 动画打破固定定位

Question

我在试图弄清楚为什么 chrome 时遇到了麻烦（这使得固定标题完全消失，Firefox 将它保留在那里但让绝对定位的元素流过固定元素，我已经使用 opacity:.99 避免了这个问题，但我仍然让我心烦意乱，这如何解决它。

http://www.rickpascua.cu.cc/newsite-snazzy/index.html <--- 问题页面。

Answer 1

将以下 CSS 设置为消失元素

-webkit-transform: translate3d(0, 0, 0);
transform        : translate3d(0, 0, 0);

该transform属性translated3d不存在。translate3d确实，并且应该使用同一页面上的动画元素解决固定定位问题。

Answer 2

编辑：用户@jacob 指出这是一种错误的方法，会对性能产生负面影响。任何强制硬件加速的属性都可以解决问题，但不要全局应用此规则，而是尝试将此规则应用于仅破坏的元素。

在将 animate.css 与 zurb 的基础结合时遇到了类似的问题。

我根据 Ryan Wu 的回答提出的解决方案

* {
backface-visibility: hidden;
}

它解决了我的问题（固定元素在动画过程中丢失填充/边框和其他讨厌的东西）

Answer 3

我仍然不知道为什么 CSS 动画会破坏布局。在我的测试中，随着动画的运行，overflow:hidden;z-index在标题上会导致它失去固定的定位！不过，我确实有答案。

首先，删除

overflow:hidden;
visibility:visible;
z-index:99;

来自固定位置的标题元素<div id="header">。

但是，删除了这 3 个属性后，它们<div id="slide-contain"/>仍然会重叠！这是因为隐式堆叠上下文分层，请参阅CSS_absolute_and_fixed_positioning#The_third_dimension文章中的 7 层。

发生不需要的重叠是因为position:relative已在<div id="slide-contain"/>（它是 的后代<div id="wrapper"/>）上设置但该元素上没有z-index。我意识到添加了相对定位是因为您想在其中绝对定位一些子元素。

因此，该<div id="slide-contain"/>元素与页面上没有 z-index 的所有其他元素位于同一 Z 平面上，其中包括固定标题。根据链接的文章，这两个元素都处于第 6 级 - 定位的后代，堆栈级别设置为 auto 或 (zero) ，并且堆叠默认为元素在 DOM 上出现的顺序，因此<div id="slide-contain"/>在 `.

因此z-index:1，标题上需要 a 始终将标题呈现在顶部。它只需要大于0，所以z-index:99改为z-index:1

另一种解决方案是在以下同级上提供否定 z-index（和） 。position:relative<div id="wrapper"/>

您可能认为在 上添加负数z-index就<div id="slide-contain"/>足够了，但它需要复制到元素祖先，否则<div id="slide-contain"/>将被推到其父元素后面。

Answer 4

我相信这个错误的发生是因为容器的动画被卸载到 GPU 上；但是，固定定位将后代从流中取出，因此它不会与容器一起卸载。然后错误地合成了固定位置元素。将任何硬件加速属性（例如translate3d）添加到固定位置的元素似乎可以“解决”问题（我相信因为它也会被卸载到 GPU，从而避免了合成过程中的问题）。

前任

<div class="container">
  <div class="fixed"></div>
</div>

---

.container {
  animation-duration: 0.8s;
  animation-name: some-animation;
}

.fixed {
  /* transform: translateX(-200%); */
  transform: translate3d(-200%, 0, 0);
  position: fixed;
  top: 10rem;
}

Answer 5

background: url(../assets/logo.png) center no-repeat,url(../assets/header2.jpg) bottom center;
height: 50px;
width: 100%;
border-bottom: 5px solid black;
position: fixed;
text-align: center;
z-index: 99;

试试这个，它会起作用的。

但是您在使用浮动 div 的标题 div 中的内部 html 也存在问题，因此如果您想使用溢出：隐藏或自动，您还应该对它们使用 clear 类。