Absolute Bilder bleiben nicht absolut in mobilen Browsern

Question

Ich habe divs in meiner Webseite mit Hintergrundbildern, absolute Position und -1 Z-Index, um die Bilder statisch zu machen und Rest der Divs über diese Bilder scrollen. Es funktioniert tadellos in Webbrowsern, aber ich kann nicht die gleiche Funktionalität in Mobiltelefonen erhalten. Mobile Ansichten in Webbrowsern zeigen genau so, wie es funktionieren sollte, aber der Rest der divs scrollt nicht über diese Bilder in mobilen Browsern. Im Gegensatz zu Webbrowsern scrallen die Bilder auch.

Hier ist die JsFiddle link für den folgenden Code.

HTML

<div class="container"> 
    <div class="section1">lorem ipsum dolar imit</div> 
    <div class="section3"> 
     <div class="section3-img"></div> 
    </div> 
    <div class="section1">lorem ipsum dolar imit</div>  
</div> 

CSS

body{margin:0; padding:0;} 
.container{height:800px; position:relative;} 
.section1{ 
    width:100%; 
    height:400px; 
    background-color:purple; 
    color:white; 
    z-index:10; 
} 
.section2, .section3{ 
    width:100%; 
    height:300px; 
    overflow:hidden; 
    position:relative; 
} 
.section3-img{ 
    background-size: cover; 
    z-index:-100; 
    width:100%; 
    height:300px; 
    position:absolute; 
    background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed; 

}

PS: Ich teste noch auf Chrome-Browser in Android-Handy.

Answer 1

Nun, ich würde lieber einen Container positionieren, der das Bild fixiert. Weil, Ihr Abschnitt 3 und Abschnitt 3-Img-Container scrollen. Wenn Sie also ein Hintergrundbild als fixiert positionieren, wird die Frage auf was festgelegt? Offensichtlich definieren mobile Browser es als übergeordnetes Element. Und weil sich der Eltern-Container beim Wischen bewegt, tut das auch das Hintergrund-Bild.

positioniert ich eine feste div: https://jsfiddle.net/mh7eza4e/8/

HTML

<div class="container"> 
    <div class="bg-img"></div> 
    <div class="section1">lorem ipsum dolar imit</div> 
    <div class="section3"></div> 
    <div class="section1">lorem ipsum dolar imit</div> 
</div> 

CSS

html,body{margin:0; padding:0;height:100%;} 
.container{height:800px; position:relative;} 
.section1{width:100%; height:400px; background-color:purple;color:white; z-index:10;} 
.section2, .section3{ width:100%; height:300px; overflow:hidden; position:relative;} 

.bg-img{ 
    position:fixed;z-index:-100; 
    width:100%;height:100%;height:100vh; 
    /* "height:100%" as a fallback for older browsers, use only if needed */ 

    background:url('http://i.istockimg.com/file_thumbview_approve/81531733/6/stock-photo-81531733-texture-of-the-oak-stump-background.jpg') 0 top repeat fixed; 
    background-size:cover; 
} 

---

Wenn mehrere feste Hintergrundbilder für jede Sekunde Ich bin der Meinung, dass das mit reinem CSS nicht möglich ist. Sie müssen JS von hier an verwenden.

Siehe hier: https://jsfiddle.net/mh7eza4e/17/

JS

$(window).on('scroll', function() { 

    var scrolledTop = $(window).scrollTop(), 
     windowHeight = $(window).height(); 

    $('.section').each(function() { 
     var $section = $(this), 
      elemTop = $section.offset().top, 
      sectionHeight = $section.outerHeight(); 

     if(elemTop-scrolledTop < windowHeight/2 && elemTop-scrolledTop > -sectionHeight) { 
      $section.addClass('active'); 
     } else { 
      $section.removeClass('active'); 
     } 
    }) 
}); 

$(window).trigger('scroll'); 

Je nach Scroll-Position relativ zum Ansichtsfenster mir eine 'aktiv' Klasse aktuell im Ansichtsfenster auf den Abschnitt eingestellt. Der aktive Abschnitt löst einen CSS-Übergang (unter Verwendung von Deckkraft) der mehreren fest positionierten Hintergrundbildcontainer aus.