I'm trying to do a simple parallax effect using background-scroll: fixed. This works in Firefox, but not Chrome. This same method worked fine in a site we did using a t3-Framework template.

Works in Chrome: wasatchpeaks.com/ (T3 Template)
Does not work in Chrome (the Map section): 23.254.129.87/~dtatest (Responsive Template)

Any ideas?

Thanks

Hi Troy,

This is because of something called background visibility.
stackoverflow.com/questions/20268962/fixed-attachment-background-image-flicker-disappear-in-chrome-when-coupled-with

I think its fixed in the latest zentools2 - you will need to recompile less to css. Or if its in the template you need to find it and remove it and it should fix it.
Thanks

Thanks Anthony - I'm not actually ZenTools for this, but just adding CSS in Responsive Template.

I've been all over that StackExchange post, and have tried all those various suggestions, to no avail.

So, what am I looking for in the template to remove?

I would search and remove the visibility reference int he less files and the css to see fi that fixes it.

Thanks Anthony. I coudn't find this. I've had quite a few Chrome issues with new Responsive Template, so it might be worth looking at that, but maybe its just me. Chrome seems to be the new IE for being difficult!

Hi Troy,

I actually had a similar issue with the latest theme Im building and the solution was to remove the position:relative assigned to the div containing the image. I cant see that on your site though - can you confirm that you get the expected result when using the default Protostar template?

Regarding Chrome - I actually use it almost exclusively to develop in. What are the specific issues you see?
Thanks

Anthony -

I've spent hours trying to get the background-scroll:fixed to work in Chrome on Responsive2. Though it seems like a Chrome bug, the exact same technique worked fine using the t3-Framework and T3-Blank template.

This site is live here: downtownslc.org/. On Firefox the parallax fixed background works fine (on the blue map section on homepage, as well as on K2 image on blog posts: downtownslc.org/component/k2/item/1450-parks-and-open-space)

Like I said, I tried all the various solutions presented on that StackExchange post, and finally just used a media query to change background-scroll on webkit only, but that doesn't make my client happy.

Just has taken so much time to get this to work right in Chrome, I almost considered rebuilding the whole thing using T3, and I may yet have to if my client gets picky about that eye candy.

Thanks for any other ideas.

Sorry we seem to have missed your reply

Just wanted to check if you still needed advice on this issue

Cheers
Paul