WebKit翻译+固定的背景附件错误 [英] WebKit translate + fixed background-attachment bug

问题描述

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');
}

请参阅上述小提琴。我在我正在开发的项目中使用类似的结构。这是一个页面交替的部分，一个用于内容，一个作为分割器与覆盖和固定的背景图像。

See the above fiddle. I'm using a similar structure in a project I'm working on. It's a page with alternating sections, one for content and one acting as a divider with a covering and fixed background image.

工作正常，但由于某种原因，当应用翻译到具有固定背景的元素或它的父级，背景完全消失或留下一些工件和图像的部分。

Works fine, but for some reason when applying a translate to the element with the fixed background or it's parent, the background completely vanishes or leaves some artifacts and parts of the image.

在任何其他浏览器都可以正常工作。没有任何运气寻找一个解决方案，所以我希望有人可以帮助我这个。

Works fine in any other browser. Haven't had any luck looking for a solution so I'm hoping someone can help me with this.

提前感谢！

推荐答案

我有同样的问题，只有在Chrome。这是我的解决方案：

I had the same problem, only in Chrome. This was my solution:

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  

这篇关于WebKit翻译+固定的背景附件错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！