I'm currently in the process of developing a website that incorporates fixed background images for smooth transitions between sections. The implementation is entirely CSS-based and has been effective in all browsers except for one: Chrome on Mac (Version 33.0.1750.146 or Version 34.0.1847.45 beta). Interestingly, it functions properly on Chrome for PC.
The issue at hand is quite peculiar...while scrolling, the image becomes duplicated, overlaid, and overall distorted. After continued scrolling, it eventually vanishes without reappearing upon scrolling back up.
Any suggestions or solutions for this perplexing problem?
Current page:
Current screenshot (malfunctioning in Chrome):
Current screenshot (working fine in Safari):
Potentially relevant CSS:
.chris, .eric, {
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
position: relative;
z-index: 50;
width: 100%;
height: 100%;
}
.chris {
background-image: url(../img/people/chris.png);
}
.eric {
background-image: url(../img/people/eric.png);
}
Edit: It appears the issue stems from the fixed background element. Removing "position:fixed" from #behind (CSS not detailed above) resolves the glitch, but does not align with my project requirements. Currently exploring alternative solutions!