Right now, the grid is a table, and zooming is done through the (non-standard) CSS zoom property. This leads to a lot of jumpiness, apparently because the table gets laid out each time the zoom changes, and gets a different width in the process. I don't know why, but there's a few things we might do to correct this.
We could use the CSS transform: scale() property instead. Changing this doesn't seem to trigger new layouts, but it is imperfect - we get white seams at the edge of black blocks. This can be avoided by using a 3d transform, but this leads to blurriness on zooming, since everything's done by the GPU with a bitmap.
We could avoid table layout by making all the elements blocks or inline-blocks. But there's still some jumpiness on zooming, for reasons I don't understand. We also end up with inconsistent line widths in the zoom.
We could do the zoom manually, by explicitly setting the size of the cells and the font inside. It should make each layout nicer, but zooming might not feel so smooth.
We could give up on doing this in HTML and do the layout in SVG instead.
Right now, the grid is a table, and zooming is done through the (non-standard) CSS
zoomproperty. This leads to a lot of jumpiness, apparently because the table gets laid out each time the zoom changes, and gets a different width in the process. I don't know why, but there's a few things we might do to correct this.We could use the CSS
transform: scale()property instead. Changing this doesn't seem to trigger new layouts, but it is imperfect - we get white seams at the edge of black blocks. This can be avoided by using a 3d transform, but this leads to blurriness on zooming, since everything's done by the GPU with a bitmap.We could avoid table layout by making all the elements
blocks orinline-blocks. But there's still some jumpiness on zooming, for reasons I don't understand. We also end up with inconsistent line widths in the zoom.We could do the zoom manually, by explicitly setting the size of the cells and the font inside. It should make each layout nicer, but zooming might not feel so smooth.
We could give up on doing this in HTML and do the layout in SVG instead.
The right choice may depend on #2 as well.