Safari 9.0.3 Flickering Issue On Window.scrollTo() Due To A Early Repaint On The Way

I'm experiencing an odd behaviuor in Safari.

On a quite content-rich page, upon specific user action (that requires relayouts and substitutions of elements on the page) I almost rebuild the entire document then I call window.scrollTo() to move the viewport to a calculated point.

Isolating the problem I found that just before window.scrollTo() a repaint occurrs (even if the JavaScript is still executing !) then the scroll is performed causing the flicker.

The document is first displayed with the new layout, then -a frame later- displayed (with the new layout) on the new position.

I explored the variuos "Safari flickers" questions (and answers) but none of them covers the issue I'm experiencing.

The behaviour described is clearly a bug of Safari as repaint must not occurr until JavaScript execution has terminated.

The web page have a solid color background. After some experimenting I found out that using an image as the background instead of a solid color solves the issue.

The main document-sized <div> has this background CSS property:

background: #eee;

Replacing it with an in-line png (a small square with the same color)

background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABlJREFUeNpifPfuHQMpgHFUw6iG4asBIMAAYmAssRRucYsAAAAASUVORK5CYII=") fixed repeat;

Avoid the spurious repaint and eliminates the flicker.