Flicker effect when moving pieces

[thewhisperinyourears]

For some reason there is a flicker effect in chrome that mozilla doesn't have when you do board.setPosition()

[shaack]

But it only happens when the Developer Console is open, right?

[thewhisperinyourears]

No, it actually happens opened or not.

[shaack]

Which operating system and Chrome version? Does the effect occur here: https://shaack.com/projekte/cm-chessboard/examples/pieces-animation.html ?

[thewhisperinyourears]

It does not occurs there.

[shaack]

Okay, then I guess the question is under what circumstances does it flicker? Can you provide an example that flickers? And under which operating system and with which Chrome version?

[thewhisperinyourears]

Version 87.0.4280.141 (Official Build) (64-bit) Windows 10 It's all coming from this function where each move I receive I update the board. channel.on('move', payload=> { console.log(chess.fen()) if( chess.move(payload.move,{sloppy: true}) != null ) { board.setPosition(chess.fen()) game_pgn.innerText = parseHistory(chess.history()) updateStatus() } else { board.setPosition(chess.fen()) } })

[shaack]

What ist "updateStatus()"? I'm afraid I need to see the entire site to find a mistake. Maybe a timing problem. maybe duplicate initialisation,... don't know.

[MelnikovSlava]

There is a flicker effect in chrome and safari (mozilla works fine). Chrome Version 88.0.4324.96 (Official Build) (x86_64). MacOS 10.15.7

It does not occurs there. https://shaack.com/projekte/cm-chessboard/examples/pieces-animation.html

Flickers (code from example file): https://drive.google.com/file/d/1eV-3Sh35lSOX0YcsVS9Xryu41jD92ZkU/view?usp=sharing

[shaack]

@MelnikovSlava I have seen this only with opened developer console. I need a test page, to verify the problem. cm-chessboard is used on my chess server chessmail.de from about 6000 Users. No one reports a flicker, so it must be an API usage failure/missunderstanding or an opened developer console, I think.

[shaack]

Hello, it would be nice if someone could post a test page on the internet where I can see the flicker effect. Unfortunately, without it I can't give any clues about the error.

[rdeyo1129]

Hello @shaack looks like I'm a little late to the party. https://frosty-ritchie-89dc35.netlify.app. Let me know if you can access the page (just click login, then dojo in the sidebar and you should see the board), but that should be an example of the pieces flickering. I'm using React, not sure about the other guys but it seems to be redrawing the pieces every time an action is made.

[shaack]

Hi @rdeyo1129. Thanks for a flickering example. It flickers also in my browser (Safari desktop and iPad). Therefore its not a Chrome issue.

My theory is, that it has something to do with image caching. Because, when I open the developer console I see the same flickering effect and with opened developer console caching is deactivated.

In code, all pieces are loaded by the svg tag "use" (<use href="sprite.svg#PIECE_ID"/>), from the external sprite file. When caching works, sprite.svg is in memory and everything is fine, but if caching don't works, the browser requests, every time a figure is show, the whole sprite. I am not a React pro, is there a setting in React to cache images or not? Mybe it has something to do with this? https://github.com/facebook/create-react-app/issues/3174

Another solution could be a pre-loading of the pieces sprite into the HTML or LoadStorage or so. I found that interesting article about it https://osvaldas.info/caching-svg-sprite-in-localstorage

[thewhisperinyourears]

Hello,

Here is the pastebin to the code. https://pastebin.com/EBDFbGX1

The flick effect happens in every move from the other player. Meaning when it comes from the channel message. So it looks like it redraws the pieces

[rdeyo1129]

@shaack it seems to be making server requests and responding with the sprite with all the images in it. Could that be it? I'm not sure why it's doing that when I have the sprite file stored locally...

[thewhisperinyourears]

Indeed mine is local too.

On Sun, Feb 21, 2021, 11:04 AM Ryan Deyo notifications@github.com wrote:

@shaack https://github.com/shaack it seems to be making server requests and responding with the sprite with all the images in it. Could that be it? I'm not sure why it's doing that when I have the sprite file stored locally...

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/shaack/cm-chessboard/issues/23#issuecomment-782881079, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARR7YEWZZK3HJE5WSB7YH3TAEVJRANCNFSM4WNMEQBQ .

[shaack]

Like I wrote above, the board is just using the standard SVG-Tag "use". If you don't use a server for local development, I think it is clear that the browser do not caches the sprite. I am missing experience with React, so I don't know how React fetches or caches images (does it). Redrawing the images should not be the problem, if everything is cached correctly. We have to redraw often, on move and on resize.

So the question for me is, is the Browser in your flickering examples really caching the SVG or is it fetching again and again?

[rdeyo1129]

@shaack I'm not sure it has anything to do with caching, I'm not sure what you mean by using a server for local development but I updated this link so it's only using js and html and not react and it's still flickering (at least on my end). https://frosty-ritchie-89dc35.netlify.app/ just wanted to reach out see if you had any other ideas. I can send you my code too if you want to take a look and see if I'm misusing it somehow?

[shaack]

@rdeyo1129 Yes I can see it. Your example ist also flickering here.

Okay, then the main question ist, why is this flickering: https://frosty-ritchie-89dc35.netlify.app/ and this is not: https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html What is the Difference?

More working examples with stockfish as engine are this https://chesscoin032.com/chess-computer and https://www.chessmail.de/pages/chess-computer.html

A fen editor with cm-chessboard: https://shaack.com/projekte/cm-fen-editor/

They are all not flickering. Why is yours? There must be a difference. On my chess server, chessmail I have 6000 Users which use the cm-chessboard day by day, nobody reports flickering on all devices and browsers you can imagine. It must have something to do with your implementation or the server, because all my examples and implementations don't flicker.

Why I think, that it has something to do with caching... Because, this example https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html does not flicker, when the developer console is closed. But when you open the developer console (Option-Command-I) in Safari or Chrome, then it flickers. With opened developer console caching is deactivated IMHO. Just an idea.

[thewhisperinyourears]

I share my code. Why is flickering mine? Also it looks like it only happens in Mozilla in my case.

On Wed, Feb 24, 2021, 10:49 AM Stefan Haack notifications@github.com wrote:

@rdeyo1129 https://github.com/rdeyo1129 Yes I see it. Your example ist also flickering here.

Okay, than the main question ist, why is this flickering: https://frosty-ritchie-89dc35.netlify.app/ and this is not: https://shaack.com/projekte/cm-chessboard/examples/validate-moves.html What is the Difference?

More working examples with stockfish as engine are this https://chesscoin032.com/chess-computer and https://www.chessmail.de/pages/chess-computer.html

A fen editor with cm-chessboard: https://shaack.com/projekte/cm-fen-editor/

They are all not flickering. Why is yours? There must be a difference. On my chess server, chessmail I have 6000 Users which use the cm-chessboard day by day, nobody reports flickering on all devices and browsers you can imagine. It must have something to do with your implementation, because all my examples and implementations don't flicker.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/shaack/cm-chessboard/issues/23#issuecomment-785171656, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARR7YGWLTCKHXCJX7EKXHLTAUNYVANCNFSM4WNMEQBQ .

[LocutusOfPenguin]

with your example, I get flickers on Google Chrome and not with firefox (using windows). But I have also problems with my Cordova and IOS only (Android works).

Before (guess with the old png files), It works on both systems on Cordova. No idea, if that helps track down the reason.

[shaack]

With version 3.6, I added some caching for the sprite. It looks like all flickering vanished now. Could you please test 3.6.x and report, if it works? (Make sure to set props.sprite.cache = true). Thanks for your contribution!

[thewhisperinyourears]

I will try it today.

On Wed, Mar 3, 2021, 6:04 AM Stefan Haack notifications@github.com wrote:

With version 3.6.0, I added some caching for the sprite. It looks like all flickering vanished now. Could you please test 3.6.0 and report, if it works? (Make sure to set props.sprite.cache = true). Thanks for your contribution!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/shaack/cm-chessboard/issues/23#issuecomment-789631186, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARR7YG3MT2JDYJRHPBKDD3TBYJTJANCNFSM4WNMEQBQ .

[rdeyo1129]

@shaack yes thank you! I went in an tested it immediately, just haven't gotten back. The flickering is gone and I'm happy. Just two 'minor' things if anyone has input:

1. Like @LocutusOfPenguin mentioned it works in Firefox, but in Chrome there is a 304 request in the network tab every time you move piece. Before, it was doing a request for every pixel moved so that improved if that hints you towards an answer.
2. Sometimes a dragging piece disappears and reappears when you drop it but only happens once per game kinda? Well have to see what other people say.

Again these aren't a big deal but thought I'd throw it out there because you seem very on top of maintaining this package. Thank you again!!!

[shaack]

@rdeyo1129 Thanks. You have found something, because I missed coding the caching for the dragged piece. Now, with version 3.6.3 https://github.com/shaack/cm-chessboard/commit/1bc8c153ac4bfce319ab8e36bfeb8c3bf2f7a4cc the 304 should have been gone and hopefully also the disappearing of the dragged piece when moving.

[thewhisperinyourears]

Tested.

This has been fixed!

On Fri, Mar 5, 2021, 4:01 AM Stefan Haack notifications@github.com wrote:

@rdeyo1129 https://github.com/rdeyo1129 Thanks. You have found something, because I missed coding the caching for the dragged piece. Now, with version 3.6.3 1bc8c15 https://github.com/shaack/cm-chessboard/commit/1bc8c153ac4bfce319ab8e36bfeb8c3bf2f7a4cc the 304 should have been gone and hopefully also the disappearing of the dragged piece when moving.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/shaack/cm-chessboard/issues/23#issuecomment-791273730, or unsubscribe https://github.com/notifications/unsubscribe-auth/AARR7YGCVNG25YDNYQLOTF3TCCMVHANCNFSM4WNMEQBQ .