WebKit tradurre + background-attachment fisso 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'); 
} 

Vedere il violino sopra. Sto usando una struttura simile in un progetto su cui sto lavorando. È una pagina con sezioni alternate, una per contenuto e una che funge da divisorio con un'immagine di sfondo fissa e fissa.

Funziona bene, ma per qualche motivo quando si applica un elemento di traduzione all'elemento con lo sfondo fisso o il suo genitore, lo sfondo svanisce completamente o lascia alcuni artefatti e parti dell'immagine.

Funziona bene con qualsiasi altro browser. Non ho avuto fortuna nel cercare una soluzione, quindi spero che qualcuno possa aiutarmi con questo.

Grazie in anticipo!

Answer 1

Provare a disattivare backface-visibility sul proprio elemento animato ed è padre.

.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

Ho avuto lo stesso problema, solo in Chrome. Questa è stata la mia soluzione:

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

mio sito ha avuto lo stesso problema: Google Translator spinto il contenuto della pagina verso il basso, ma non l'immagine del corpo di fondo. Questo è come ho risolto è:

Ho appena aggiunto un nuovo div vuoto l'immagine di sfondo

<div class="BackgroundImageBody></div> 

Questo è il 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; 
} 

Poi ho accodato il div al traduttore di Google con div con JavaScript $ .ready (function()

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

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

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

Puoi vedere che funziona allo http://www.photostation.pt/ Spero che questo sia stato utile.

Andreas (ahuber@viamodul.pt)