search

lichess-org / chessground

Mobile/Web chess UI for lichess.org
https://lichess.org
GNU General Public License v3.0
1.05k stars 261 forks source link

Scale svgs without javascript #200

Closed 370417 closed 3 years ago

370417 commented 3 years ago

Changes shapes and custom-shapes to use user coordinates instead of viewport (px) units. This lets us skip renderSvg on resize and fixes #197. I never actually found out what caused that bug.

Minified, 26431 -> 26183 byes. Barely 0.9% smaller.

niklasf commented 3 years ago

Thanks.

Tested (arrows, circles, annotation glyphs, flipping, resizing) and looks good. Somehow promotion and drop auto shapes look slightly off. I doubt it's a fundamental issue, but we should probably figure it out before merging.

image

370417 commented 3 years ago

It seems like Chrome and Firefox refuse to understand non-integer sizes. Chrome just sets the width and height to 1. Firefox makes the entire image invisible. Desktop Safari surprisingly handles it well.

Fixed by setting the size at 1 by 1 and using a transform to scale the image.

niklasf commented 3 years ago

Ah, strange. Can confirm using the transform fixes this.