Carcasonne display not normal

[metalfluff]

Same problem since iOS update.

[Thomas-P]

I have the same issue on Mac, with Safari

[ClaudiaSz]

Me too

[Porfirio78]

Same thing to me in iPhone and MacBook Pro.

[KingLeafhill]

I’m so sad that a bug this game-breaking hasn’t been acknowledged yet. What can we do?

[Bob H10]

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.

[KingLeafhill]

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.

How do you replay a game from the start that’s in progress?

[williao]

From the BGA twitter account:

https://twitter.com/BoardGameArena/stat ... 94976?s=20

Not helpful, especially as they’ve just hiked the price 20%!

[shadowphiar]

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.

[KingLeafhill]

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.

I don’t know if it’s thanks to you but the tiles seem fixed! I’m using Brave browser.