4

我有一个background-attachment: fixed应用到它的节点。固定背景“中断”如果它跟随一个-webkit-transform应用了它的节点，我正在寻找一个黑客来修复它，如果有人知道一个（例如，有多个 webkit css3 错误可以用奇怪的东西修复，比如应用-webkit-perspective等）。

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

我已经报告了这个错误，但是一个类似的（for 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;
}
4

2 回答 2

0

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

如果您将 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;
}

小提琴

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

于 2014-01-24T19:41:30.110 回答
0

Wrapping the translated object into div with opacity:0.99 works for me.

于 2014-12-21T23:54:27.107 回答