I followed a simple tutorial from here. Which basically has the following code
<!doctype html>
<html>
<head>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="/css/chessboard.css" />
</head>
<body>
<div id="board" style="width: 400px"></div>
<script src="/js/chess.js"></script>
<script src="/js/jquery-1.10.1.min.js"></script>
<script src="/js/chessboard.js"></script>
<script>
var init = function() {
var board, game = new Chess();
var makeRandomMove = function() {
var possibleMoves = game.moves();
if (game.game_over() === true || game.in_draw() === true || possibleMoves.length === 0) return;
var randomIndex = Math.floor(Math.random() * possibleMoves.length);
game.move(possibleMoves[randomIndex]);
board.position(game.fen());
window.setTimeout(makeRandomMove, 500);
};
board = new ChessBoard('board', 'start');
window.setTimeout(makeRandomMove, 500);
};
$(document).ready(init);
</script>
</body>
</html>
Everything works fine without any problems. But when I removed <base href="..."> and substituted all links with this base url ( http://chessboardjs.com/css/chessboard.css ). I got the same animation but now with a terrible blinking effect.
This blinking effect does not appear in IE 11.0.1, Firefox 25.0.1, but appears in Chrome 31.0.1650.57 m
I do not understand what is the reason (in my opinion nothing should change).
P.S. after some time I thought that the reason is due to the Chrome's warning while using jQuery event.returnValue is deprecated. Please use the standard event.preventDefault() instead., but when I was able to get rid of it, the problem was still there. So I am completely puzzled.
I am the creator of chessboard.js
This is likely related to Issue 52
Check that whatever webserver is serving the image files for the chess pieces is setting an appropriate expires header for them; it should be returning an HTTP 304 Not Modified after an image file has already been requested.
What is probably happening is the web server is re-serving the image files on every board update and causing the "flicker" effect.
I might change how this functions in future versions, but for now that should probably do the trick.