WebKit翻译+修复后台附件错误

Question

http://jsfiddle.net/MR94s/

.wrap {
    position: absolute;
    z-index: 777;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: white;
    -webkit-overflow-scrolling: touch;
    -moz-transform: translateX(25%);
    -webkit-transform: translateX(25%);
    -o-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%);
}

section {
    position: relative;
    width: 100%;
    display: table;
    height: 450px;
    border-bottom: 2px solid #E6EAED;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 20px;
    background-color: #333;
    background-repeat: repeat;
    background-position: center center;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url('http://placekitten.com/600/600');
}

看到上面的小提琴.我在我正在研究的项目中使用类似的结构.这是一个包含交替部分的页面,一个用于内容,另一个用作具有覆盖和固定背景图像的分隔符.

工作正常,但由于某些原因,当将translate应用于具有固定背景或其父级的元素时,背景完全消失或留下一些工件和图像的一部分.

在任何其他浏览器中工作正常.没有任何运气寻找解决方案所以我希望有人可以帮助我.

提前致谢!

Answer 1

尝试关闭backface-visibility动画元素及其父元素。

.wrap {
    position: absolute;
    z-index: 777;
    top: 100%;
    left: 0;
    width: 100%;
    min-height: 100%;
    background-color: white;
    -webkit-overflow-scrolling: touch;
    -moz-transform: translateX(25%);
    -webkit-transform: translateX(25%);
    -o-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    -o-backface-visibility:     hidden;
    backface-visibility:     hidden;
}