有谁知道在 CSS3 转换后“修复”损坏的“背景附件：已修复”的技巧？答案

【问题标题】：Does anyone know a hack to "fix" broken `background-attachment: fixed` after a CSS3 transform?有谁知道在 CSS3 转换后“修复”损坏的“背景附件：已修复”的技巧？
【发布时间】：2014-02-03 11:20:59
【问题描述】：

我有一个应用了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;
}

【问题讨论】：

至少在我的浏览器中， translate(-37px, 29px) 可以正常工作；只是 translate3d 失败了。很奇怪……
@vals -- 这可能与translate3d 进行硬件加速转换有关
是的。这就解释了为什么所有标准黑客都失败了，它们是在禁用 GPU 时启用 GPU 的方法，而不是相反。我猜这个问题来自 GPU 正在处理的滚动，并且失败了。作为文档来源，请参阅chromium.org/developers/design-documents/…

标签： css webkit css-transforms background-attachment

【解决方案1】：

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

【讨论】：

看起来这是为了回复another answer。请不要创建新的答案作为评论。当你有足够的声望时，你就可以评论其他人的问题和答案。
@WilliamPrice 我同意这一点，尽管这似乎是一个足够有效的单独答案，因为它主要关注另一种方法。
@Pokechu22 是的，它可以去任何一种方式。如果打算作为一个单独的答案，我认为它需要更多的解释和/或代码才能独立存在。

【解决方案2】：

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

如果您将 3d 转换后的元素包装在一个溢出：隐藏的 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；而不是溢出，但没有运气......

【讨论】：