WebKit translate + fixed background-attachment bug

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

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.

Thanks in advance!

Answer 1

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

    });
}  

Answer 2

Try turning off backface-visibility on your animated element and it's parent.

.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;
}

Answer 3

My site had the same problem: Google Translator pushed the page content down, but not the background image of the body. This is how I have resolved it:

I just added a new empty div with the background image

 <div class="BackgroundImageBody></div>

This is the CSS

.BackgroundImageBody{
background: url('/WebRoot/Store/Shops/3077-120214/MediaGallery/design/fundo.jpg') repeat scroll 0% 0% #FFF !important;
height: 100%;
width: 100%;
position: absolute;
}

Then I appended the div to the Google translator div with a JavaScript $.ready(function()

<script type="text/javascript">
// <![CDATA[
(function($){
$.ready(function(){

$(".BackgroundImageBody").appendTo(".skiptranslate");

});
})(jQuery);
// ]]>
</script>

You can see this working at http://www.photostation.pt/ Hope this was useful.

Andreas ([email protected])