4

background-attachment: fixedそれに適用されたノードがあります。固定された背景は、適用されたノードに続くと「壊れます」。-webkit-transform誰かがそれを知っている場合、それを修正するためのハックを探しています(たとえば、次のような奇妙なことで修正できるWebkit css3バグが複数あります)適用-webkit-perspectiveなど）。

これは、ノードを移動するほど単純ではないことに注意してください。私のライブコードでは、ノードの順序に関係なく壊れます（ただし、jsfiddleにはありません）

そして、私はすでにそのバグを報告しましたが、同様の ( のposition: fixed) バグが 1 年以上開かれています

例 ( 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 変換された要素をオーバーフロー : 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;
}

フィドル

これと同様の解決策を試しました（たとえば、オーバーフローの代わりに opacity: 0.99; を設定しますが、運がありません...

于 2014-01-24T19:41:30.110 に答える
0

翻訳されたオブジェクトを div にラップするとopacity:0.99うまくいきます。

于 2014-12-21T23:54:27.107 に答える