Background-attachment: fixed not working in chrome

[Brad Wrage]

Hi folks,
Weird issue here where a fixed background image is not working properly in chrome. Working perfectly in safari and firefox. If I scroll up and down through the container and refresh the page, I can see the fixed photo in the correct place in relation to the how it should be working. However ,it is not working on live scroll.

Anyone seen this before?

.background-image-container {
background: url(‘../assets/images/test.jpg’) no-repeat;
background-attachment: fixed;
background-position: 0 0;
min-height: 540px;
}

[Birdi999]

hey Brad,

Wish I could help. I’ve been having issues with absolute positioning myself. It seems every device I look at, it looks different. I am currently “thinking out” the problem. It’s been a week. Teehee.

[Brad Wrage]

Disabled my off-canvas nav which has backface-visibility: hidden and works. Any idea how to get these to play nicely?

[Atelierbram]

@BradWrage

Could you please post a link to your webpage, or maybe make a codepen.

[Birdi999]

I’m sorry Brad. I may be mis-informed, but I try to use just basic CSS. I talked to my Godaddy support rep the other day, and he said that the smartphones have trouble with js. Being as about 50% of business surfing is done on telephones now, it is worrisome to me. I may be overly cautious and plumb silly, but I shy away from anything that uses js. But, you sound much more proficient and knowledgeable than I am. I am basically just trying to get my foot in the door. It is all so overwhelming and difficult to figure out, especially the SEO and security ends of web design.

Good luck.
Ams

[Paulie_D]

I talked to my Godaddy support rep the other day, and he said that the smartphones have trouble with js.

Absolute rubbish.

[paulob]

Disabled my off-canvas nav which has backface-visibility: hidden and works. Any idea how to get these to play nicely?

It’s a known bug in webkit with backface-visibility (and transforms) and any ‘fixed’ element that has a parent with the backface-visibility property applied will lose its fixed position. There seems to be no fix except to remove the fixed positioned element from that context.

Usually with fixed elements this is not a problem because they can be anywhere in the html as they are placed relative to the viewport. It may not be so easy though if you are applying the fixed background to a div in the normal flow as you probably want that div in the flow at the position it currently occupies. However without seeing your html or a demo its hard to say whether the fix is possible.

[Carlif]

I would refer you to the following solution: https://github.com/zurb/foundation-sites/issues/3155

Pretty simple, add the following to your css:

1. Add -webkit-backface-visibility: hidden; to show the image again.
2. Add -webkit-transform: translateZ(0x); to remove parallax flickers on mobile phones

[Author]

Posts