🏠 back to Observable

Bug? scaling canvas is jumpy

I haven’t found out why, but it seems specifically in observable, scaling a canvas element with css transforms results in an inconsistent canvas size:

If you drag the slider, you’ll see the black canvas jumping.

Here’s a jsfiddle with the same code, without jumpiness:

https://jsfiddle.net/jasperh/zp98e207/

A work-around is by instead of using css-transform scaling, just giving the canvas a static width/height in css (i.e. not the width/height html attribute). But I thought it might still be good to fix this if it’s an observable specific thing.

I don’t see any issues on Safari on macOS.

Good point, I hadn’t checked other browsers yet. It may be a chrome bug then. The issues shows on chrome (78, windows 10) but not firefox or edge.

Previous discussions of Chrome rendering issues (though those were about Mac Chrome, so maybe this is a different issue?):

https://talk.observablehq.com/t/long-string-output-cells-on-macos-and-chrome/1703
https://talk.observablehq.com/t/flickering-slides/2274
https://talk.observablehq.com/t/struggling-with-janky-rendering/2279