Chessboard jitter on mobile: the real culprit wasn’t layout — it was full redraws

 Chessboard jitter on mobile: the real culprit wasn’t layout — it was full redraws

I spent way too long chasing a nasty “board jump” on mobile. At first it looked like resize, scroll anchoring, Safari weirdness, orientation changes… none of that was the real cause.

The issue was simpler: on every move, the board renderer was rebuilding all the piece nodes instead of only updating the piece that actually changed.

So even with perfectly stable board geometry, the browser was effectively doing this:

one pawn moves → redraw 32 pieces

That collective repaint is what creates the ugly visual “jitter” or flash, especially on iPhone/WebKit.

The fix was to move to a persistent/incremental rendering model:

• squares stay mounted
• piece DOM nodes stay mounted
• unchanged pieces are untouched
• only the moving piece changes position
• captures remove one node
• promotion replaces one node
• identical FEN = zero DOM mutations

The mental model that finally made it click was video compression:
don’t redraw the whole frame when only one thing moved.

If your chessboard looks stable geometrically but still “jumps,” inspect the DOM mutations. You may be fighting a renderer that refreshes far more than it needs to.

chessboardjs.com » Homepage