When viewing this site http://jsfiddle.net/dN4S4/1405/ on chrome with a Mac retina display the background is not correctly rendered. This is the CSS used:
body{
width: 100%;
height: 100%;
margin: 0;
position: absolute;
}
#cards{
width: 100%;
height: 100%;
overflow-y: auto;
}
.card-wrapper{
width: 100%;
height: 100%;
background: url(url here);
background-attachment: fixed;
background-size: cover;
background-position: center;
}
.card{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.875);
font-family: "Helvetica Neue", Helvetica, Arial;
font-size: 14px;
text-align: left;
color: #FFFFFF;
}
I found out that this is a known issue but have not found a fix that actually works. It renders as expected on any other browser and even works fine in chrome when viewing the site with a "normal" display.
For simplicity I am using the same image in the demo, however I want to use different images creating the "parallax" effect.
Please not that "position: absolute" on the body does not cause this issue. It also occurs with different "position" and "display" values.
Any suggestions on how to make it render correctly?
Thanks!
I have forked and tweaked your JSFiddle to get the parallax effect to work pretty much that way that I would expect it to work, but you'll have to check it out for yourself to verify.
The main insight here is that the background-attachment: fixed should be applied to the parent/container div that will not "scroll". Think of your card-wrapper class being a very, very tall container, holding all the individual cards that scroll upwards, and all of this while the fixed container, which has the background image, remains fixed in the background.