Board Game Arena

Bob H10 wrote: ↑04 May 2023, 02:27 I have the same issue. Refreshing or logging out did not work. I found that replaying the game from the start straightens it out. Replaying just the last few moves might work; it seems to depend on when the tiles started going crazy. Of course it gets tedious if you replay from the start every move.

shadowphiar wrote: ↑15 May 2023, 23:51 I'm not the developer of Carcassonne, I don't have access to the (unminified) source code and I can't test or deploy any fixes. That said, I think I have found the bug and a fix.

It's weirder than I imagined, and concerns the way Safari is parsing invalid syntax in the "background-position" style attribute in the tile_art_{n}" divs. If you look at one in the inspector you'll see an html representation such as:

Code: Select all

<div id="tile_art_6" class="tile_art first_edition" style="background-position: 9.090909%; transform: rotate(180deg); width: 88px; height: 88px;"></div>

Note the background-position has a single percentage value. This means that background-position-y becomes 50% and this is not what was intended, it is supposed to be 0%. How did it get there?

Turns out there is a bug in jstpl_tile_on_map, where there is no semicolon at the end of the "style" definition inside id="tile_art_${tile_id}"

This seems to cause the second argument to background-position not to get evaluated. It is immediately missing from node.style.cssText, and becomes invisible in the DOM representation when the style gets rewritten when the rotate transform is applied.

For what it's worth I have reproduced this in a minimal example, https://jsfiddle.net/shadowphiar/skh5q6yz/. On new Safari you will see the result "background-position: 10%;" and on other browsers "background-position: 10% 0%;". Arguably this is a Safari bug – it's certainly an unexpected result - I'll report it on webkit bugzilla but since it concerns faulty markup I don't think it will get very far. Either way, if BGA adds this semicolon I believe everything should look right again on all the browsers.