Fix Chrome's issues with background-attachment: fixed
Sometimes when you're trying to use the effect where the photo in a container is fixed as you scroll, Chrome will so some weird things. This is probably because some parent container in the dom is using -webkit-backface-visibility: hidden. If that's ever the case, try using -webkit-transform: translateZ(0x) instead of -webkit-backface-visibility: hidden.
You'll have this issue if you're using Zurb's Off-Canvas Menu solution for their Foundation front-end framework.
If you're using their off-canvas menu solution with Sass, open their _offcanvas.scss partial that comes with Foundation. In the mixin called kill-flicker, comment out the backface visibility property, and uncomment the translateZ property. Your Chrome backgrounds should scroll the way you expect.
Written by Jon Thomas
Related protips
3 Responses
This didn't work for me. I still have problems with background image attachments. This background image partially disappears or changes visibility as I scroll down the page. I don't see this on Ubuntu, only windows and Mac Chrome. Firefox is ok.
Worked for me.. Thanks A lot :)
I am having the same issue (using Drupal Foundation with Safari & Opera). The background in the element with background-attachment: fixed disappears when new content is loaded via ajax, however on the initial page load the background is there. If I switch an attribute on and off in the element inspector panel in the browser it shows up again. Does anyone have any ideas on how to address this issue? I have removed all -webkit-backface-visibility: hidden & -webkit-transform: translateZ(0x) from my css but no joy in solving this.
Have a fresh tip? Share with Coderwall community!
