How to resolve the Chrome issue with background-attachment fixed

During my WordPress Theme development, I experienced a very frustrating bug where Google Chrome stopped rendering a background image with background-attachment: fixed. After hours of googling, I hardly found the reason. It’s something related to transform property. For example, transform: translate3d(0,0,0) on the body or transform: translateZ(0) on the element. But that isn’t enough.

Looking into my CSS, I found out that the use of “transform: translate3d” anywhere on the site breaks the fixed background. Thus, replacing with transform: translate” solved the issue.

Here is a live demo, be sure to view it with Google Chrome.

See the Pen Chrome Bug with fixed background and translate3d by Raphael Rychetsky (@Rycode) on CodePen.

Leave a Comment