Blurry SVG scaling

[ImKadaga]

The SVG images (pieces, boards) are blurry compared to Lichess, see this comparison image: https://i.imgur.com/G46hzxw.png

The screenshot is from Chromium (currently using version 80.0.3987.132 (Official Build) Arch Linux (64-bit))

It's better in Firefox, but I don't have this problem on Lichess with Chromium.

[gbtami]

We use chessgroudx (fork of chessground). On 8x8 boards it should produce identical html/svg.
Our CSS is different compared to lichess CSS though.

[ImKadaga]

I think I found the problem. Now the zoom slider allows to zoom to a number which can't be divided by 8 without a fraction. The zoom range/slider must be defined to use an integer (multiple of 8). So each zoom step must be -8px or +8 px. See this Lichess issue: lichess-org/lila#5184

I made a quick test with the dev inspector tool, here is a comparison screenshot: https://i.imgur.com/RUwDe6X.png

[CouchTomato87]

Should this be different for different board sizes?

[gbtami]

@CouchTomato87 Good point!

[ImKadaga]

Should this be different for different board sizes?

Based on the current default board sizes in https://github.com/gbtami/pychess-variants/blob/master/static/chessground.css the 8px would be good for 8x8, 10x8, 7x7, 9x10, 10x10. Those sizes/numbers are multiples of 8.

A 5x5 and the 9x9 boards are not. Maybe the default sizes should be changed for those?

[CouchTomato87]

I'm not sure how 7x7, 9x10, and 10x10 are multiples of 8.

Also it should be noted that the shogi (5x5 and 9x9) boards are rectangular instead of squares

[ImKadaga]

Default sizes from chessground.css (see the arrows regarding the multiples of 8)

/* 9x10 */
.cg-wrap.cg-576-640 {
  width: 576px;  ----> 8x72
  height: 640px;  ---->  8x80
}
.cg-wrap.cg-576-640.mini {
  width: 288px; ----> 8x36
  height: 320px; ----> 8x40
}
/* 10x10 */
.cg-wrap.cg-640-640 {
  width: 640px; ----> 8x80
  height: 640px;---->8x80
}
.cg-wrap.cg-640-640.mini {
  width: 320px; ----> 8x40
  height: 320px; ----> 8x40
}

I'm not familiar with chessground(x), I just see these sizes in the css, and when I modified these sizes with Chromium's dev inspector tool to a correct number (multiple of 8) the board didn't get blurry. I don't have a development environment, so I can't test it further right now, I just thought it might be worth to check out.

[CouchTomato87]

It looks like shogi squares are multiples of 13 wide and 15 high... Does that mean the scale should be 195?

[ImKadaga]

Shogi board's default size is 468 x 540
Calculated in settings.ts: https://github.com/gbtami/pychess-variants/blob/master/client/settings.ts#L119

basewidth: 9x52
baseheight: 9x60

The default zoom level is 100. If you zoom 1 step, the zoom level will be 101, then the size will be recalculated: https://github.com/gbtami/pychess-variants/blob/master/client/settings.ts#L121

const pxw = 101 / 100 * 468 = 472,68 px, not divisible by 9 and this causes blur, mostly in Chrome/Chromium (Firefox scales better it seems to me.)

Step value of 25 works fine. Example:

Step 25
Default zoom = 100
One zoom step = 25
New Zoom level = 125

const pxw = 125 / 100 * 468 = 585 (divisible by 9, it's 9x65), this is not blurry.

(Side note: after zoom you can check/modify the current zoom value with the browser's developer tools, it's stored in the 'Local Storage'.)

Since it's not a "smooth" zoom (with the value of 25) this is not a good solution, so I let Shogi at the default value (1). Today I created a pull request (already got merged) to fix this blurry zoom in other games. Maybe in the future we'll have time to find a solution for shogi.

[CouchTomato87]

I think a stepwise zoom would still be better.

[gbtami]

https://backscattering.de/chess/display-table/

[gbtami]

Latest upstream chessground solved it lichess-org/chessground#191 if I understand correctly.
Upstream merge to chessgroungx can solve our issue as well.
@Fulmene ? :)

[Fulmene]

Latest upstream chessground is now merged. Is this still an issue?

[gbtami]

I think we can close this now.