Fixed background not working in Chrome

Question

I have background-attachment: fixed; on my hero section and it works in firefox and safari but not in chrome. I can get it to work by changing to position:relative; and z-index: -1; but then the buttons within the hero become unusable and this also creates problems in firefox and safari.

#hero {
padding-top: 60px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

I tried changing the parent positions to static based on other post I found but that didn't work either.

http://bayarddev.com/fca/about-us/

Answer 1

Ok I see it now. On .hero's parent element .off-canvas-wrap and .inner-wrap you are using -webkit-backface-visibility: hidden. If you turn this off the background attachment works fine.