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

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?

Alow

Answer 1

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. :)

Alow

Works, but just to extend this answer, all parents (back up to the root body and html) of the element with the fixed background image have to have a position other than relative fixed or absolute - not just the element with the image. That's really too bad. Has this bug been fixed yet? – Stallworth

This solved it for me too, I had a position: relative on a parent element. Worked once that was removed. – Saucedo

Has this bug been fixed yet? Considering if you need those styles of position, especially relative, absolute for positioning purposes... – Caplin

I am still seeing this bug with Chrome Version 35.0.1916.153 OS X along with Version 37.0.2055.0 canary also on OS X. As @BlackPanther & @jarace87 stated, there might be a different value set on the position property within a parent container. Lucky for me I only had to go three containers up in the dev tools to solve it. Much appreciated – Tunesmith

It worked once I removed backface-visibility: hidden; from my CSS. – Balladist

For me nothing was working, I basically give up and started doing other stuffs. After a few changes I've included one element with position:fixed and it fixed the background problem! – Oney

In my case, I had backface-visibility: hidden applied to the container, it worked when I removed it. Not sure if this can help but thought to share just in case. – Clevie

Wow! Not finally solved my problem but after almost googling to death at least i can reproduce/fix and get a working solution by *keeping" the background-attachment: fixedproperty! So I confirm: if any container around the element with a background-attachment:fixed" image has another position property than static```, which exactly was in my case, the painting issue will happen in chrome on retina displays! – Magician

Works for me, but the problem is if you want to use the section with the fixed background as a relative parent you can't. This is a known Chrome bug, I really don't know why they haven't fixed it, works like a charm in IE, Edge and FF. – Bornstein

My issue was a bit different and using backface-visibility:hidden; did the trick, so thanks for mentioning that! – Plutonic

Answer 2

Same problem here. I had a sticky header using position:fixed; that flickered in PC Chrome 34. I tried the solutions in this thread, position:static; in the parent broke other parts. But I know adding -webkit-transform: translate3d(0,0,0); basically makes Chrome turn that html into a layer so that it won't get repainted. That worked for me.

element {
  position:fixed;
  top:0;
  left:50%;
  width:960px;
  height:50px;
  margin-left:-480px;
  -webkit-transform: translate3d(0,0,0);
  /* ...all other CSS... */
}

UPDATE
future-friendly answer is to use the will-change property to create a layer!
W3 specs
CanIUse
MDN definition

element {
      position:fixed;
      top:0;
      left:50%;
      width:960px;
      height:50px;
      margin-left:-480px;
      will-change:top;
      /* ...all other CSS... */
    }

And I'll be honest, this seems like a weird solution to fix the flicker, but in essence it makes the element a layer, same as translate3d().

Goldina

Nice input. The 'will-change' is a new thing to me. But, heads up, this solution is only good if the element is near the leaf nodes. using it on something like 'body', is bad practice. – Alow

Thank you! I have same issue with element with background-attachment: fixed; Adding -webkit-transform: translate3d(0,0,0); works for me. – Ize

Adding -webkit-transform: translate3d(0,0,0) will disable background-attachment fixed on firefox. – Glyconeogenesis

Answer 3

Maybe a little late to answer, but it seems that the bug comes with the background-attachment: fixed property in chrome. I found a solution changin its value to "scroll". It will cause a jitterin effect on firefox but you can avoid it using a media-browser query in your CSS, something like this:

.yourstellarlayer{
     background-attachment: fixed;
}
/*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .yourstellarlayer{ 
        background-attachment: scroll;
    }
}

Hope it helps!

Salesperson

Yup.. sure this is another method of doing it... But removes the fixed backgroundg parallax effect from the website in chrome browsers. Practically not a good idea, for chrome being one of the most widely used browser. Hopefully they fix the bug. Nyway thanks for the comment.. :) – Alow

Not exactly... The "fixed" property MUST be changed to "scroll" to fix this bug in chrome browsers... I'm seeing the same effect in chrome and firefox using this fix... Check it here: deletec.info/memoria2012/maqueta/html – Salesperson

@Santirisco: this leads to us losing on the parallax effect. – Avion

@Sunny R Gupta: I insist, NOT AT ALL, check the example here, you'll see exactly the same paralax effect un FFox than in Chrome with this fix: deletec.info/memoria2012 – Salesperson

Answer 4

I was having the same issue with Chrome, it seems to be a bug that occurs when there is too much going on inside the page, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

#element {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}

Stricker

This should be attached to the elements causing the problem. Thanks a lot you rock! – Georgianngeorgianna

In my case it was the .slick-track that was causing the issue. – Carcinoma

Answer 5

This really bugged me and it almost ruined my night. My fix is to set

background-attachment: scroll;

It worked on my project.
Before this, I had it on fixed. Hope this helps.

Balbinder

Answer 6

For me the issue was the styles attach to the parent elements of the div who has the fixed background, I put -webkit-backface-visibility: inherit; to the two main parents of my fixed div.

in my case I was using foundation off-canvas so it goes like this

.off-canvas-wrap{
    -webkit-backface-visibility:inherit;
}

.inner-wrap{
    -webkit-backface-visibility:inherit;
}

Dropsonde

Answer 7

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)

Alysaalyse

Answer 8

An update almost 5 years in the future... This still seems to be a problem with chrome. I've tried most of the solutions mentioned including adding:

transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);

and it is not fixing the stuttering issue. adding background-attachment: scroll takes away the parallax effect which is crucial to the UX of the site. The solution above that mentions adding a parent element is not changing anything for me. Any other ideas from people that have had this issue recently? I'm using Gatsby(React) on the front end.

Gilreath

Have you found any solutions? I am facing this problem as well. – Ctenidium

Answer 9

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

Pickerel

Exact duplicate of your previous answer: #16181924. Instead of posting duplicate answer, post a single and give link here in a comment for the reference. – Bomarc

Answer 10

My task was to create a page with a parallax effect. After attempts to fix this by means of CSS I came up with the following solution.

JavaScript:

var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if (isChrome)
{

    var itemArr = $('.slider-title');

    $(window).scroll(function()
    {
        var pos = $(window).scrollTop();
        var wh = window.innerHeight;

        $(itemArr).each(function(i, item){

            var p = $(item).position();
            var h = $(item).height();
            if (p.top + h > pos && p.top < pos+wh)
            {
                // items ir redzams
                var prc = (p.top - pos +h)/wh ;
                //console.log(prc);
                $(item).css({'background-position':'center '+prc+'%'});
            }

        });
    });

}

CSS:

    /*only for webkit  browsers*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .slider-title{ 
        background-size:auto;
        background-position: center 0%;
    }
}

.slider-title would be the item with background-attachment fixed.

Urogenous

Answer 11

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.

Formulary

Answer 12

This one is late to party but an amazing discovery, as I can see mostly css framework users, Bootstrap, Foundation (others) , have issues, and I am sure many of you also have scroll to top js functions that show scroll to top button as user starts scrolling down ,

if you have anything like this ( Bootstrap has it built in )

.fade {
    opacity: 0;
    -webkit-transition: opacity .35s linear;
    -o-transition: opacity .35s linear;
    transition: opacity .35s linear;
}
.fade.in {
    opacity: 1;
}

or you are showing some element via ,

-webkit-transition: opacity .35s linear;
-o-transition: opacity .35s linear;
transition: opacity .35s linear;

or you are adding any kind of element or element class with transition , on scroll down, via js ( animation.css, waypoints.js, velocity.js )
remove transition/class if possible from that element or recheck when that element appears in order to fix the choppy Chrome issue.

Escribe

Answer 13

Add the transform property to your element with fixed background image. You can have any set position.

#thediv {
    width: 100%;
    height: 600px;
    position: relative;
    display: block;
    background-image: url(https://cdn.shopify.com/s/files/1/1231/8576/files/hockeyjacket1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 10px solid black;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}

https://jsfiddle.net/rkwpxh0n/2/

Manure

Answer 14

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

Holinshed

Answer 15

Seems to bug in Chrome the moment you add any markup on the element. Try removing the background from such element and give it a position:relative. Inside the element add a new div with the dimensions you need and add the background, just don't add any markup inside of it.

Example:

Current:

<div class="container" style="background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

Corrected:

 <div class="container" style="position:relative;">
     <div class="added-background" style="position:absolute;width:100%;height:100%;background-image:url(example.jpg);background-position:center;background-attachment:fixed;background-size:cover;">
     <div class="example"></div>
</div>

Hope it helps!

Nauplius

Answer 16

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.

Lafferty

Answer 17

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

Confab

What it means "set the image like below"? – Ounce

Answer 18

The issue still persist.

its happening to me on google chrome when i have { background-attachment: fixed; transform: scale(1); transition: transform }

I need background-attachment fixed for parallax effect.

I am scaling my container on scroll.

when tranition and transformed is removed parallax works. Having said that, i can have either one scale effect or parallax effect and not both working on chrome.

Safari doesn't complain and works both like a charm

Anthropologist