Google Chrome 67 introduced a browser bug that creates a major problem for websites that use the popular parallax effect with background images. Specifically, parallax images below the fold either don't display at all or just flicker. The following CSS kicks the GPU into action for CSS transitions, making them smoother by applying a higher frame rate.
1 2 3 4 5 6 7 | /* apply to any element with 'background-attachment: fixed' kicks in GPU acceleration */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } |
Leave a Reply