[core] Display of tile groups seems to be broken in Chrome/Edge

[philcampeau]

How to Reproduce the Bug?

Looking at the tiles page for games using tile groups to display double-sided tiles, it looks like something has been broken. I'm seeing this on all my devices in both Chrome and Edge, but not Firefox.

In Firefox it displays properly:

The same is happening for all other games using def init_tile_groups

https://18xx.games/tiles/18carolinas/all
https://18xx.games/tiles/18cuba/all
https://18xx.games/tiles/18esp/all
https://18xx.games/tiles/18mag/all

Which Browser / Platform?

I'm seeing this on Chrome and Edge on my Window 11 PC and in Chrome on my Samsung mobile device but not in the Samsung browser.

[philcampeau]

Issue appears to be related with the auto-translate feature in Chrome. Disabling it makes the page display properly.

Discussion here: https://18xxgames.slack.com/archives/C012K0CNY5C/p1739982253472539

Still seems like something worth looking into.

[ollybh]

Here's a copy of the Slack conversation, as it will get archived and disappear from Slack after 90 days.

Phil Campeau Wednesday at 16:24
Just out of curiosity, is this page rendering wonky for anyone else? https://18xx.games/tiles/18mag/all
I'm seeing it like the screenshot below (first image) on multiple devices including mobile and desktop, but at least one of my friends is seeing it how you'd expect it to be rendered (second image)

Scott Ninmer Wednesday at 16:50
Looks normal to me.

Manatiro Wednesday at 17:09
Firefox was normal, chrome had the misaligned version for me.

Phil Campeau Wednesday at 17:10
Hmmm yes you're right. Firefox seems to display it normally.

TheCat Wednesday at 17:31
Also normal in Safari

merlinofchaos (Earl) Wednesday at 18:10
Oh wow, my result is really weird.
I loaded it in Chrome and I got this. And when I turned on the auto translate Chrome did, I got this.


I can't see how translation has anything to do with it, but something is making the grouped tiles slightly too wide for their box and so the SVGs get wrapped.

Phil Campeau Wednesday at 18:19
Innnnnnteresting

merlinofchaos (Earl) Wednesday at 18:19
Also, why Chrome thinks the page is in Hungarian and translating to English is another issue.
I wonder if adding a lang="en-US" to the HTML tag would prevent Chrome from trying to translate it.
Testing that with directly editing it doesn't work, but I think it's already made its decision about that before I can. But also I think it's probably ignoring that and seeing the Hungarian in the city names

TheCat Wednesday at 18:26
The city names don't appear on the tiles page

merlinofchaos (Earl) Wednesday at 18:27

TheCat Wednesday at 18:35
so that raises an interesting side question - why aren't the base tiles on the in-game tiles page? They only appear on the wiki tiles page now.

Phil Campeau Wednesday at 18:44
I don't think it's just the hungarian names though. All games that use the tile groups feature are doing it
eg: https://18xx.games/tiles/18carolinas/all

merlinofchaos (Earl) Wednesday at 18:45
You're right. It doesn't offer to translate that, but if I select "Translate to English" it does.

Phil Campeau Wednesday at 18:45
did that page load correctly for you initially?

merlinofchaos (Earl) Wednesday at 18:46
Yes, on the initial load it's fine. After "Translate to English" it does that. I wonder if anyone for whom it loads this way initially has Chrome set to auto translate?

Phil Campeau Wednesday at 18:47
yep, disabling auto-translate fixes it for me too

merlinofchaos (Earl) Wednesday at 18:47
Safari doesn't even have an option to translate the carolinas page.
Or the 18Mag page either
So Chrome is really tripping on something.

Phil Campeau Wednesday at 18:49
maybe adding <div class = "notranslate"> to the page
hmm no that didn't seem to work

merlinofchaos (Earl) Wednesday at 18:51
stackoverflow suggested
<meta name="google" content="notranslate">
but adding it manually has no effect, though it's one that might only matter on page load.
Another suggestion is
<meta http-equiv="Content-Language" content="en">
However, adding that notranslate would prevent translating it into non-English languages. Not that it matters to this particular page, there's nothing to translate.
Another person suggested adding dir="ltr" to the head tag helped them, but that's one person. Might be worth trying. Again doesn't seem to affect it editing the HTML but that's still probably after decisions are already made.