Background-attachment: fixed flickers in google chrome

HTML & CSS
1

I tried google for help on this and it seems to be a bug in chrome but I still can’t find a solution. I have taken a look at many stackoverflow questions similar to this but those solutions still didn’t help.

When I try to scroll down on the page the background-image I inserted to the left and right of the container flickers and messes up. I am using Google Chrome Version 35.0.1916.153 on Ubuntu Desktop. I’ve been told that this is not a problem in Chrome on a Mac. I tested on firefox in Ubuntu and the background image works fine.

You can see how it looks on http://easource.com

CSS code:

#left-container {
background-image: url('http://easource.com/wp-content/uploads/2014/07/traphouse4.jpg');
background-attachment: fixed;
background-position: -1% 0%;
background-repeat: repeat-y;
cursor: pointer;
}

Also, I tried removing the background-position, adding “-webkit-backface-visibility: hidden;” but none of those worked. Can anyone help me out here?

2

Hi,

The backface visbility hack (or the transform hack) is used to fix the problem with jitters in chrome on animations and like where it triggers the 3d algorithm and handles the display much better. Unfortunately the aforementioned properties also kill fixed positioning and can’t be used in the same context as fixed elements.

The simplest solution is to remove the rules:


#left-container,#right-container{
-webkit-backface-visibility:visible;
backface-visibility:visible;	
}

That immediately fixes the problem with the side images (tested on your live site).

However if you were using those rules to calm down some animations in that section (I didn’t notice any) then you would need to take a different approach and remove the fixed elements from that current context.

Something like this perhaps.


#left-container, #right-container {
	background:none;
}
body:after, body:before {
	content:"";
	position:fixed;
	z-index:9999;
	left:0;
	top:0;
	bottom:0;
	width:160px;
	background:red;
	background:url(http://easource.com/wp-content/uploads/2014/07/traphouse4.jpg) repeat-y;
}
body:after {
	left:auto;
	right:0;
	background:url(http://easource.com/wp-content/uploads/2014/07/felix.jpg) repeat-y;
}
@media screen and (max-width: 768px){
body:after,body:before{display:none}	
}

It al depends whether you were using the before and after elements for anything else but I couldn’t see anything immediately obvious but you have a lot of stylesheets to look through.

Hope that helps :slight_smile:

3

I added that line of code and it works great but I also had this piece of css that acted as a link when you click on those background images but now for some reason it isn’t working when I click that area.

#left-link{ 
position: fixed; 
top: 0px; 
left: 0px; 
width: 138px; 
height: 673px;
cursor: pointer; 
}
4

You would need to raise the z-index for those elements and just use top and bottom instead of a height.


#left-link{ 
position: fixed; 
top: 0; 
left: 0; 
bottom:0;
width: 138px; 
cursor: pointer; 
z-index:10000;
}

.

You could even apply your image as a background to that element instead of the code I gave you.

I also assume you have a link for the right side also and would need to do the same as above.

5

Thanks a lot for all of the help. Both of your tips worked.