11

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!

Adrift
  • 58,167
  • 12
  • 92
  • 90
mattm
  • 276
  • 2
  • 8
  • 2
    Its apparently a known bug - https://code.google.com/p/chromium/issues/detail?id=20574 – Adrift Jun 03 '13 at 17:09
  • Thanks for the link. Shame WebKit has such a nasty and unnecessary bug. – mattm Jun 03 '13 at 21:01
  • I agree, despite most people liking WebKit the most, it certainly has its fair share of quirks. This is one of the *many* I've come across .. – Adrift Jun 03 '13 at 21:18
  • 1
    So apparently it's not a bug, just WebKit following the rules. What I'm trying to achieve hasn't been fully defined in the W3C spec yet. See [this](http://stackoverflow.com/questions/9928365/give-css3-rotate-to-a-div-in-chrome-then-the-background-attachmentfixed-creatin) topic – mattm Jun 03 '13 at 22:20

3 Answers3

4

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

    });
}
Jayden Lawson
  • 2,154
  • 2
  • 21
  • 24
3

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;
}
Dave Mackintosh
  • 2,738
  • 2
  • 31
  • 40
  • Worked for me when I added backface-visibility hidden also to the animation container element with perspective setting. But this webkit ehaviour is really annoying. – actimel Aug 24 '14 at 13:35
  • 1
    Yeah, that didn't do anything for me either. Curious about the circumstance in which adding these props will help anything – Alkanshel Mar 21 '15 at 01:31
1

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 (ahuber@viamodul.pt)

Andreas
  • 11
  • 2