Redibujado sincrónico en Webkit / ¿Espera la actualización de DOM?

Estoy manipulando la propiedad de transformación como en mi página web para lograr un efecto de desplazamiento:

element.style.webkitTransform = "translate(0px, -"+scrollY+"px)"; snapShotPage(); 

Sé que en la mayoría de los navegadores (incluido el Webkit de mi experiencia) espere hasta que la ejecución del script termine para realizar cambios visuales, sin embargo, en mi caso, necesito que snapShotPage() ejecute después de que se haya realizado el redibujado / repintado, para obtener un instantánea. ¿Hay alguna manera de hacer esto?

Noté que usar scrollTop causa este comportamiento, sin embargo, no es una opción en mi caso. ¿Hay alguna solución que evite el uso de setTimeout ?

Siempre es como -> Código -> Diseño -> Pintura

Si parte de tu código se basa en el resultado de la pintura, debes cambiarlo. El trabajo de pintura del navegador no es parte de un flujo de trabajo síncrono, por lo que necesita un segundo bloque de código para la cola de eventos.

Solución 1:

 window.setTimeout(snapShotPage, 0); 

Solución 2:

Utilice requestAnimationFrame y llame a la función snapShotPage en el siguiente cuadro.

Solución 3:

Reaccionar en un evento DOM y llamar al evento de cambio de snapShotPage a través de MutationObserver