css - 固定位置丢失溢出隐藏和 CSS3 动画

Question

从 CSS3 animations breaking fixed positioning when page scrolled 开始我创建了一个 test case (仅限网络工具包)。代码也复制在下面。

我要的是固定的header和相对定位的内容。内容相对定位的原因是因为段落内部有某些元素是绝对定位的；虽然我在这个例子中省略了它们。

当然要添加position:relative到 <p> (没有 z-index )导致内容堆叠在不需要的标题顶部。即如果 CSS 只是

#header {
  background-color:#f00;
  height:50px;
  width:100px;
  position:fixed;
}

p {
  width:100px;
  padding-top:50px;
  position:relative;
}

然后文本在标题上可见。所以我们添加一个z-index:1到标题来解决这个问题。但是，这仍然没有解决旋转图像溢出标题的问题。我会想到一个简单的 overflow:hidden在标题上会起作用。它似乎直到页面滚动，然后 fixed header 也滚动。

似乎是z:index的存在和 overflow:hidden , 尽管 auto和 scroll也破坏了布局，我想知道为什么？

而不是 z-index:1在 header 上，我可以使用 z-index:-1在 <p> 上但这仍然不能解释为什么 z:index 的组合, overflow CSS3 动画导致固定标题滚动。

最后(当然)删除糟糕的旋转动画使标题按预期固定。请注意，我永远不会在页面上显示该动画，它只是为了突出显示问题:-)

显示问题的代码(仅适用于 webkit 浏览器)

HTML

<div id="header">
  <div id="spinner"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

body, p {
  margin:0;
}

#header {
  background-color:#f00;
  height:50px;
  width:100px;
  position:fixed;
  z-index:1;
  overflow:hidden;
}

#spinner {
  background:url(http://lorempixel.com/40/40/abstract/1/);
  height:44px;
  width:44px;
  margin:2px 0 0 2px;
  -webkit-animation: spin 2s infinite linear;
}

@-webkit-keyframes spin {
  0% {-webkit-transform:rotate(0deg)}
  50% {-webkit-transform:rotate(720deg)}
  100%{-webkit-transform:rotate(1440deg)}
}

p {
  width:100px;
  padding-top:50px;
  position:relative;
}

Answer 1

尝试添加:

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

到页面上的固定元素。似乎动画需要被告知它们应该存在于哪个视角，将 3d 设置为 0 将暗示 2d。