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

Following on from CSS3 animations breaking fixed positioning when page scrolled I have created a test case (webkit only). Code is copied below also.

根据CSS3动画打破了页面滚动时的固定位置，我创建了一个测试用例(仅webkit)。代码也被复制到下面。

What I want is a fixed header and relatively positioned content. The reason the content is relatively positioned is because there are certain elements that are absolutely positioned inside the paragraph; although I've omitted them from this example.

我想要的是一个固定的标题和相对定位的内容。内容相对定位的原因是段落中有一些元素是绝对定位的;尽管我在这个例子中省略了它们。

Of course adding position:relative to the <p> (without a z-index) causes the content to be stacked on top of the header which is not desired. i.e. if the CSS is just

当然，添加位置:相对于

(没有z索引)，内容将被堆叠在不需要的头上。也就是说，如果CSS是公正的

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

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

then the text is visible over the header. So we add a z-index:1 to the header to fix that. However, this still doesn't address the problem of the spinning image overflowing the header. I would have thought a simple overflow:hidden on the header would work. It seems to until the page is scrolled, whereupon the fixed header also scrolls.

然后在标题上显示文本。我们添加一个z-index:1到标头来修正它。但是，这仍然不能解决旋转图像溢出头部的问题。我可能会想到一个简单的溢出:隐藏在头部会起作用。直到页面被滚动，固定的页眉也会滚动。

It seems to be the presence of z:index and overflow:hidden, although auto and scroll also break the layout and I want to know why?

似乎是z:index和overflow:hidden的出现，虽然auto和scroll也会破坏布局，我想知道为什么?

Instead of z-index:1 on the header I could use a z-index:-1 on the <p> but that still doesn't explain why the combination of z:index, overflow and the CSS3 animation causes the fixed header to scroll.

我可以在

上使用z-index:-1而不是z-index:1，但这仍然不能解释为什么z:index、overflow和CSS3动画的组合会导致固定的头部滚动。

Lastly (and of course) removing the awful spinning animation makes the header fixed as expected. Please note, that I wouldn't ever have that animation on a page, it's just there to highlight the problem :-)

最后(当然也是)删除可怕的旋转动画会使标题按照预期固定。请注意，我永远不会有那个动画在一个页面上，它只是在那里突出问题:

Code showing the problem (only for webkit browsers)

显示问题的代码(仅适用于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;
}

2 个解决方案

#1

Try adding:

尝试添加:

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

to the fixed element on the page. Its seems animations require to be told in which perspective they should exist, setting 3d to 0 would imply 2d.

到页面上的固定元素。动画似乎需要被告知它们应该存在的角度，将3d设置为0意味着2d。

#2

This is certainly a weird behaviour and probably a webkit bug but I managed to fix the problem by nesting an extra div.

这当然是一个奇怪的行为，可能是一个webkit bug，但是我通过嵌套一个额外的div来解决这个问题。

HTML

HTML

<div id="header">
    <div id="fix">
        <div id="spinner"></div>
    </div>
</div>

CSS

CSS

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

Check out this jsfiddle: http://jsfiddle.net/C95nq/23/

查看这个jsfiddle: http://jsfiddle.net/C95nq/23/。

For whatever reason that combination of properties breaks but move the overflow:hidden to its own div seems to fix the issue.

无论出于什么原因，属性组合中断了，但将溢出:隐藏到它自己的div中似乎可以修复这个问题。