WebKit übersetzen + Fest 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'); 
} 

die oben Geige sehen. Ich verwende eine ähnliche Struktur in einem Projekt, an dem ich gerade arbeite. Es ist eine Seite mit wechselnden Abschnitten, eine für Inhalt und eine, die als Teiler mit einem deckenden und festen Hintergrundbild fungiert.

Funktioniert gut, aber aus irgendeinem Grund, wenn eine Übersetzung auf das Element mit dem festen Hintergrund oder dessen Eltern angewendet wird, verschwindet der Hintergrund vollständig oder hinterlässt einige Artefakte und Teile des Bildes.

Funktioniert in jedem anderen Browser. Ich hatte kein Glück bei der Suche nach einer Lösung, also hoffe ich, dass mir jemand dabei helfen kann.

Vielen Dank im Voraus!

Answer 1

Versuchen Sie backface-visibility auf Ihrem animierten Element und es ist Elternteil zu deaktivieren.

.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 2

Ich hatte das gleiche Problem, nur in Chrome. Dies war meine Lösung:

// 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 3

Meine Seite hatte das gleiche Problem: Google Translator unten den Seiteninhalt gedrückt, aber nicht das Hintergrundbild des Körpers. Dies ist, wie ich es gelöst haben:

Ich habe gerade ein neues leeres div mit dem Hintergrundbild

hinzugefügt

<div class="BackgroundImageBody></div> 

Dies ist die 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; 
} 

Dann hängten ich die div mit dem Google Übersetzer div mit einem JavaScript $ .ready (function()

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

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

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

Sie können dies beifunktioniert sehen Ich hoffe, das war nützlich.

Andreas (ahuber@viamodul.pt)