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?

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

Solution 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().

Solution 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!

Solution 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*/
}

Solution 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.

View more solutions

Comments

[BlackPanther]

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

[Santirisco]

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

[atwixtor]

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?

[Joseph Race]

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

[lislis]

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

[Admin]

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

[Sunny R Gupta]

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

[Paresh Mayani]

Exact duplicate of your previous answer: stackoverflow.com/questions/16181424/…. Instead of posting duplicate answer, post a single and give link here in a comment for the reference.

[iamjustaprogrammer]

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

[Santirisco]

@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

[Harrison]

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!

[Leo]

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.

[Marc]

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!

[Guy Mazuz]

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

[Gabrielizalo]

What it means "set the image like below"?

[dingo_d]

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.

[BlackPanther]

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.

[ptguy]

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

[Loko Web Design]

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

[Abdul Rab Memon]

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

[Dan]

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

[Ninad Walanj]

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