WebKit przetłumaczyć + stałe 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'); 
} 

Patrz wyżej skrzypce. Używam podobnej struktury w projekcie, nad którym pracuję. Jest to strona z naprzemiennymi sekcjami, jedna dla treści i jedna działająca jako separator z zakrywającym i utrwalonym obrazem tła.

Działa dobrze, ale z jakiegoś powodu przy stosowaniu translacji do elementu ze stałym tłem lub jego rodzicem, tło całkowicie znika lub pozostawia pewne artefakty i części obrazu.

Działa dobrze w każdej innej przeglądarce. Nie miałem szczęścia szukając rozwiązania, więc mam nadzieję, że ktoś mi w tym pomoże.

Z góry dziękuję!

Answer 1

Spróbuj wyłączyć backface-visibility na animowanym elemencie i jego rodzic.

.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

Miałem ten sam problem, tylko w Chrome. To było moje rozwiązanie:

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

Moja strona miała ten sam problem: Tłumacz Google odepchnął zawartość strony, ale nie obraz tła ciała. W ten sposób mam rozwiązać go:

Właśnie dodałem nowy pusty div z obrazu tła

<div class="BackgroundImageBody></div> 

to jest 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; 
} 

Potem załączonych div do tłumacza Google div z JavaScript $ .ready (funkcja()

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

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

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

Możesz zobaczyć tę pracę w http://www.photostation.pt/ Mam nadzieję, że to było przydatne.

Andreas (ahuber@viamodul.pt)