Estoy tratando de hacer que una transición funcione para que el color bg se desvanezca en otro color dependiendo de la posición de la página / es decir. desencadenado por divs con la misma clase. Encontré algunos js aquí (http://codepen.io/Funsella/pen/yLfAG) que funciona exactamente como quiero en el escritorio, pero se rompe en iPad (sin importar el navegador).

¿Alguien sabría cómo hacer esta transición con CSS?

Encontré pero es provocado por un vuelo estacionario ...

Por ejemplo..http://jsfiddle.net/L9JXG/1/

.div1 {
    height:200px;
    width:600px;
    position:relative;
    background:red;
}
.div1:after {
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
    background-size:cover;
    opacity:1;
    transition: 3s;
}
.div1:hover:after {
    opacity:0;
}