CSS Overflow and Absolute Positioning Issue on Android Browser

Issues with Absolute Positioning of Div in Mobile Browser

This won't completely fix your issue but it will get you closer. On the parent div id=wrapFix you should add position: relative to it. The problem is that when you have an element with position: absolute it needs to know what it should be absolute against. While it worked fine on desktop browsers it broke on mobile. Probably because of screen size or something. But I've added that line to that div and it seems to be a lot closer to fixing the issue on iPhone.

Absolute images doesn't remain absolute in mobile browsers

Well, I would rather position a container holding the image fixed.
Because, your section3 and section3-img container scroll. So positioning a background-image as fixed would result in the question fixed to what?
Obviously mobile browsers define it as fixed to parent. And because the parent container moves with swiping so does the background-image.

I positioned a fixed 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;
}

---

If multiple fixed background images for each section are what you're after, then I'm afraid that's not possible with pure CSS. You need to use JS from here on.

See here: 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');

Depending on scroll position relative to the viewport I set an 'active' class to the section currently in viewport. The active section triggers a CSS-transition (using opacity) of the multiple fixed positioned background image containers.

Fixing absolute positioning in Android

Although this is not the problem described there, the Android browser has another issue regarding absolute positioning; absolutely positioned DIVs disappear. The solution Paweł Komarnicki found is -webkit-backface-visibility: hidden:

<div style="position: relative">
    <div style="position: absolute; -webkit-backface-visibility: hidden">
    </div>
</div>

Absolute positioning on Samsung Internet

Try this it looks problems due to the position relative on the span tag and it's not taking the height and width 100% due to a inline element.

<section class="mobile-only" style="margin-top: 0px; margin-bottom: 20px;">
      <span class="" style="position: relative;width: 100%;height: 100%;display: block;">
        {% render 'full_width_image' , mobile_image: hero_mobile %} <!-- liquid code: just places a  img -->
        <div class="gradiant-overlay-hero"></div>
        <a href="{{ section.settings.link_1 }}" class="primary-button button mobile_button_hero" style="position: absolute; bottom: 0;">{{ section.settings.button_text_1 | escape }}</a>
           <a href="{{ section.settings.link_seconary }}" class="primary-secondary
             button mobile_button_hero mobile-only" style="position: absolute; bottom: 4em; background-color: {{ section.settings.color_seconary }}; box-shadow: none; color: white; border: 1px solid {{ section.settings.color_seconary }}; border-radius: 6px; box-shadow: #efefef 0px 8px 24px;">{{ section.settings.button_text_secondary | escape }}</a>
      </span>
    </section>
    
    <style>
      .gradiant-overlay-hero{
        position: absolute;
        bottom:0;
        left:0;
        right:0;
        width: 100vw;
        height: 100px;
        background: rgb({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} );
        background: -moz-linear-gradient(0deg, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,1) 0%, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,0) 100%);
        background: -webkit-linear-gradient(0deg, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,1) 0%, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,0) 100%);
        background: linear-gradient(0deg, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,1) 0%, rgba({{ settings.background | color_extract: 'red' }} ,{{ settings.background | color_extract: 'green' }} ,{{ settings.background | color_extract: 'blue' }} ,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#020024",GradientType=1);
      }
    .mobile_button_hero {
        position: absolute;
        bottom: 10px;
        left: 50vw;
        transform: translate(-50%,50%);
        width:70vw;
      }
    </style>
    <!-- other classes are mainly for styling colors- padding etc. -->

---

Related Topics