Debugging a Flicker

Working on the game, and every time I mouse-click to move (finally adding that, it's been all keyboard up to now), the screen was flickering! This had never happened before. Literally 3 hours of debugging, adding voodoo CSS incantations like:

-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: rgba(0,0,0,0);

which did nothing…

Finally made a new test project with just the canvas code and a mouse handler. Still not flickering. Then I add random lines on the screen to see some content, need to find the canvas size to make those lines, and that flushes out the offending line:

1: canvasSize() {
2:  const canvas = $("canvas");
3:  const size = [canvas.offsetWidth, canvas.offsetHeight];
4:  canvas.width = size[0]; canvas.height = size[1];
5:  return size;
6: }

See it? Line 4 is reassigning the width & height of the element, based on the display width/height. Which has to be done during setup and on window resize, but blanks out the entire canvas.

SIGH. Split that out into setup, and the flicker goes away.

It's so impossible to know what's my fault and what's HTML/CSS/JS being weird.

At least I'm only fighting a single rendering engine here. I miss doing this stuff in UIKit/SpriteKit or OpenGL ("I made a triangle!"), but the former's sinking in the Swamp of Swift, and the latter's RIP deprecated, and I'm hardly going to chain myself further to Apple with Metal.

Leave a Reply

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)