search

lichess-org / chessground

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

Fix bug where pieces weren't horizontally aligned properly when zoomed on browser #260

Closed dhirallin closed 1 year ago

dhirallin commented 1 year ago

The updateBounds function was truncating the fractional part of the board's width and height. There is no reason to do this. Fractional pixel widths/heights are a legit thing.

ornicar commented 1 year ago

The reason is that straight horizontal and vertical lines get blurry if they land in between pixels, for many setups.

dhirallin commented 1 year ago

My bad, this was to do with how our app was rendering the board, not a bug in chessground. Sorry for the inconvenience.

dhirallin commented 1 year ago

I'm still confused by this, could you help?

If I use the example linked here: https://github.com/lichess-org/chessground-examples/blob/master/index.standalone.html

When cg-container is resized by updateBounds() to align with integer pixel bounderies, cg-wrap and the parent div of cg-wrap are not also being resized. Because of this, the image of the board is staying the same size as before, and the pieces become mis-aligned.

What is the correct solution to this? I can duplicate the code from updateBounds() to resize the parent of cg-wrap. But this seems pretty clunky.

benediktwerner commented 1 year ago

The board image should be on cg-board. The example might be a bit outdated. I recommend comparing to Lichess's setup since that's what chessgrounds is written for.

dhirallin commented 1 year ago

Ok great, now I've got it, thanks again for your help.