Fixed attachment background image flicker/disappea

Question

I am currently doing a parallax website theme. The background images need to be attached as fixed for certain 'div's and 'section's to avoid jquery indulging in everything. The problem was the background images of the tags below any animated item disappeared while the transformation is being done, only on Google Chrome. Remedy?

Answer 1

We had a similar problem with a position: fixed; element. This element contained a relatively positioned container, containing an absolutely positioned image. On CSS transition the image disappeared, when the transition was done is re-appeared.

We tried solving the problem by setting the -webkit-backface-visibility to hidden on several elements, including the body element, but this did not help. With the help of this thread we used Chrome's web inspector to fiddle around with elments' position properties and luckily were able to solve the problem without having to alter the site that much. (all we had to do was change the position of the parent of the fixed element to static)

Answer 2

i also had same issues in chrome

it's very simple no need to add any webkit & media tag just follow below steps

1.instead of background:url('path-to-image') set the image like below and set the position as fixed

2. it will work in chrome as well as IE browser

Answer 3

I've had this problem on overlay div below popup window (randomly disappearing in opera 20) - both animated, and activated by script.

<div class="popupwrapper">
    <div id="popupdownload" class="popup">
        <h1>Test</h1>
    </div>
    <div class="popupoverlay"></div>
</div>

---

.popupwrapper {
display:            none;
z-index:            9100;
}
.popupwrapper.active {
display:            block;
}
.popupwrapper > div {
-webkit-transition: opacity 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
-moz-transition:    opacity 150ms ease-in-out, -moz-transform 150ms ease-in-out;
-ie-transition: opacity 150ms ease-in-out, -ie-transform 150ms ease-in-out;
transition:         opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.popupoverlay {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
background:         rgba(26,26,26,.9);
opacity:            0;
}
.popup {
position:           fixed;
top:                30%;
left:               40%;
padding:            48px;
background:         #e6e6e6;
z-index:            9101;
-webkit-transform:  scale(1.6);
transform:          scale(1.6);
opacity:            0;
}
.popupoverlay.active {
opacity:            1;
}
.popup.active {
-webkit-transform:  scale(1);
transform:          scale(1);
opacity:            1;
}

Overlay was positioned absolutely (.popupoverlay), but in container which wasn't positioned in any way. I've copied overlay's absolute positioning to parent (.popup) and it works OK.

.popupwrapper {
position:           absolute;
top:                0;
right:              0;
bottom:             0;
left:               0;
width:              100%;
height:             100%;
display:            none;
z-index:            9100;
}

I think problem appears only when positioning of parent elements isn't obvious.

Glad if helped anyone. Regards

Answer 4

Here is a solution that works (2014.7.11) at firefox 30.0, chrome 35.0, opera 22.0, ie 11.0:

STEP 1: add these lines at .htaccess:

# cache for images
<FilesMatch "\.(png)$">
Header set Cache-Control "max-age=10000, public"
</FilesMatch>

• detailed description of this problem and how to fix it: https://code.google.com/p/chromium/issues/detail?id=102706

STEP 2: add images preloading, for example:

var pics = []; // CREATE PICS ARRAY

$(document).ready(function(){
    ...
    preload(
        '/public/images/stars.red.1.star.png',
        '/public/images/stars.red.2.star.png',
        '/public/images/stars.red.3.star.png',
        '/public/images/stars.red.4.star.png',
        '/public/images/stars.red.5.star.png',
        '/public/images/stars.empty.png'
    );
    ...
    $('.rating').on('mousemove', function(event){
        var x = event.pageX - this.offsetLeft;
        var id = getIdByCoord(x); //
        if ($(this).data('current-image') != id) {
            $(this).css('background-image', 'url(' + pics[id].src + ')');
            $(this).data('current-image', id);
        }
    })
    ...
})

...

// PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
    for (i = 0; i < arguments.length; i++) {
        pics[i] = new Image();
        pics[i].src = arguments[i];
        // alert("preload " + arguments[i]);
    }
}

P.S. thanks Shawn Altman

Answer 5

So I am on Chrome version 40 and still seeing this issue. The workaround which is working for me at the moment is by creating a inner div setting position relative on that div and making it fit the height of its parent and setting the background on the parent div with a background attachment of fixed:

<section style="background-attachment: fixed;">
 <div style="position: relative;">
  // Code goes here including absolute posiioned elements
 </div>
</section>

The problem seems to occur when you have a position relative and background attachment fixed on the same element in my case.

Hope this helps.

Answer 6

Another workaround if you must have position: fixed/relative/absolute maybe because you have an absolutely positioned element inside (as was my case) is to create a wrapper div inside of the flickering div and move the position and background property to that.

e.g.

you had -

<div class="background-flickers' style="background:url('path-to-image'); position:relative">
 <absolutely positioned element>
</div>

Possible workaround

<div class="no-more-flicker!">
 <div class="wrapper" style="style="background:url('path-to-image'); position:relative">
  <absolutely positioned element>
 </div>
</div>

I don't have the flicker anymore, apparently the flicker bug does not descend to child containers.