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

background fixed parallax flicker background-attachment
BlackPanther picture BlackPanther · Nov 28, 2013 · Viewed 85.5k times · Source

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

BlackPanther picture BlackPanther · Nov 30, 2013

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

Related questions

IE 10 & 11 make fixed backgrounds jump when scrolling with mouse wheel

When you scroll with the mouse wheel in Windows 8 the fixed background image bounces around like crazy. This only affects IE 10 and IE 11. This affects elements with position:fixed as well. Here is an example with a fixed background-image: http://…

Read More
Jquery Mobile Android - Fixed full-screen background image?

I'm trying to add a full screen fixed background image to the first page only of a jquery mobile app for Android (I'm also using phonegap). In a nutshell, I would like the background image to be fullscreen and fixed, …

Read More
Stretch and scale a CSS image in the background - with CSS only

I want that my background image stretch and scale depending on the browser viewport size. I've seen some questions on Stack Overflow that do the job, like Stretch and scale CSS background for example. It works well, but I want …

Read More