Question

我有一个已应用background-attachment: fixed的节点。固定的背景如果它跟随一个应用了-webkit-transform的节点后“破坏”，我正在寻找一个黑客来修复它，如果有人知道一个（例如，有多个webkit css3错误可以是修复了应用-webkit-perspective等奇怪的事情。

请注意，这并不像移动节点那么简单。在我的实时代码中，无论节点的顺序如何，它都会中断（虽然我意识到它不在jsfiddle中）

我已经报告了这个错误，但类似的错误（position: fixed）已经开放了一年多

示例（http://jsfiddle.net/m3scX/2/）：

<img src="http://d.tile.stamen.com/watercolor/5/25/13.jpg" />

<div id="parent">
    <div id="child"></div>
</div>

的CSS：

img {
    -webkit-transform: translate3d(-37px, 29px, 0px);
}

#parent {
    position : relative;
    border   : 1px solid #000;
    overflow : hidden;
    height   : 100px;
}

#child{
    background : url('http://d.tile.stamen.com/watercolor/7/99/57.jpg') 0px 0px no-repeat fixed;
    width      : 100%;
    height     : 100px;
    position   : absolute;
    top        : 0px;
    left       : 0px;
}

Answer 1

这不是一个完美的解决方案，因为它有副作用，但可能会让位给更好的解决方法

如果你将3d变换后的元素包装在overflow：hidden div中，它似乎可以工作：

<div class="container">
<img src="http://d.tile.stamen.com/watercolor/5/25/13.jpg" />
</div>
<div id="parent">
    <div id="child"></div>
</div>

.container {
    overflow: hidden;
}

fiddle

我尝试过类似的解决方案（例如，设置不透明度：0.99;而不是溢出，但没有运气......

Answer 2

使用opacity:0.99将已翻译的对象包装到div中对我有效。

有没有人知道在CSS3转换后“修复”破坏的`background-attachment：fixed`的黑客攻击？

2 个答案:

fiddle