Background-Attachment:Fixed Not Working - Android Chrome (V40)

Background-attachment: fixed not working on android/mobile

Have you tried this?

    html, body {
        height: 100%;
    }
    html {
        overflow-y: hidden;
    }
    body {
        overflow-y: scroll;
        background-color:#000000;
        background-image:url('../img/bg_reader.jpg');
    }

Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

This has been a very common unsolved mystery. Recently I had the same problem, and '-webkit-backface-visibility: hidden', proved to be less than useless (on my 'fixed' attached background), since the background just disappeared when it was set. (Additional Info: the reason is that when the background is set as fixed, it is almost similar to putting a fixed 'div' in the background and setting the original div background to be transparent. Hidden backface does the obvious).

To solve the current problem, try setting the 'position' propery of the element as 'static', or if you have given it some other value, namely 'relative', 'fixed' or 'absolute', just remove those.

If you don't remember setting the position property, and the problem still persist, my suggestion is that you use a debugging tool on chrome or firefox, to

make sure there are no manually set values to the 'position' property other than
'static'.

Just spent half an hour searching... Thought this could make it easier for you... regards. :)

background-attachment:fixed and background-size: cover makes images dissapear in Chrome

This is your current code in the jsfiddle:

HTML:

<section class="main_section" id="sec1" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Start</h1>
    </article>
</section>

<section class="main_section" id="sec2" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Überschrift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ante eu massa consectetur consequat. Nullam interdum justo vitae mi tristique interdum.
            Mauris arcu metus, gravida sed malesuada in, euismod in libero. Nulla euismod ultrices pulvinar. In at gravida nulla. Suspendisse at neque ut neque convallis
            hendrerit. Maecenas mollis placerat commodo. Maecenas ornare magna vitae nulla mollis accumsan. Nullam nec congue lorem. In eleifend, elit porttitor cursus hendrerit,
            turpis justo tincidunt ante, sed imperdiet velit arcu vitae ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Mauris sed turpis felis. Donec sit amet aliquam quam. Duis at orci aliquam metus bibendum egestas nec sit amet sem. Aliquam eget diam nulla, eget porttitor ligula.
            Sed at velit vel tellus consequat gravida sit amet sit amet nunc. Nam convallis interdum arcu ut interdum. Curabitur vitae eros felis.</p>
    </article>

</section>

<section class="main_section" id="sec3" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Überschrift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ante eu massa consectetur consequat. Nullam interdum justo vitae mi tristique interdum.
            Mauris arcu metus, gravida sed malesuada in, euismod in libero. Nulla euismod ultrices pulvinar. In at gravida nulla. Suspendisse at neque ut neque convallis
            hendrerit. Maecenas mollis placerat commodo. Maecenas ornare magna vitae nulla mollis accumsan. Nullam nec congue lorem. In eleifend, elit porttitor cursus hendrerit,
            turpis justo tincidunt ante, sed imperdiet velit arcu vitae ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Mauris sed turpis felis. Donec sit amet aliquam quam. Duis at orci aliquam metus bibendum egestas nec sit amet sem. Aliquam eget diam nulla, eget porttitor ligula.
            Sed at velit vel tellus consequat gravida sit amet sit amet nunc. Nam convallis interdum arcu ut interdum. Curabitur vitae eros felis.</p>
    </article>
</section>

<section class="main_section" id="sec4" data-stellar-background-ratio="0.2">
    <article class="section_details">
        <h1>Überschrift</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ante eu massa consectetur consequat. Nullam interdum justo vitae mi tristique interdum.
            Mauris arcu metus, gravida sed malesuada in, euismod in libero. Nulla euismod ultrices pulvinar. In at gravida nulla. Suspendisse at neque ut neque convallis
            hendrerit. Maecenas mollis placerat commodo. Maecenas ornare magna vitae nulla mollis accumsan. Nullam nec congue lorem. In eleifend, elit porttitor cursus hendrerit,
            turpis justo tincidunt ante, sed imperdiet velit arcu vitae ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
            Mauris sed turpis felis. Donec sit amet aliquam quam. Duis at orci aliquam metus bibendum egestas nec sit amet sem. Aliquam eget diam nulla, eget porttitor ligula.
            Sed at velit vel tellus consequat gravida sit amet sit amet nunc. Nam convallis interdum arcu ut interdum. Curabitur vitae eros felis.</p>
    </article>
</section>

CSS:

.main_section {
    height: 1000px;
}

#sec1 {
    background: url("http://farm4.staticflickr.com/3718/9321223260_700efbede4_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#sec2 {
    background: url("http://farm8.staticflickr.com/7422/9320632979_1cc63b1320_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#sec3 {
    background: url("http://farm3.staticflickr.com/2863/9322473736_76944327d5_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#sec4 {
    background: url("http://farm4.staticflickr.com/3719/9319325635_14e101bbdb_b.jpg") no-repeat fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.section_details {
    background-color: white;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

This appears to be a bug in Google Chrome.
This does happen on Linux in the current version of Chrome.

You can apply a property of

.section_details {margin: 1px;}

in order to work around the display issue. As I am not a Chromium developer, I cannot tell you what goes on behind the scenes that this "fixes" it, but good luck! :) Hopefully this will get resolved soon.

If you do not want the margin to actually show, you may be able to add

.section_details {
    -webkit-transform: scale(1.01);
    transform: scale(1.01);
}

as well.

edit: See it in a jsfiddle: http://jsfiddle.net/jjordanca/4Rwze/1/

---

Related Topics