Fix: firefox back button not working (#2557)

## Description:

Fixes an issue on Firefox based browsers, which caused the back button
to not work when in a game.

This was caused because the renderer always appended the canvas to the
document, even when the canvas was already in the document. Chrome
handles this by moving the canvas to the end of the document, whereas
firefox refreshes the whole page. This made it lose important context,
specifically the pushed \#refresh history changes, which caused the back
button to not work properly.

Additionally, Firefox threw out all but the last instance of
history.pushState in certain cases, so using history.replaceState fixes
that issue.

Functionality is preserved for Chrome.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Lavodan
This commit is contained in:
Lavodan
2025-12-04 00:41:58 +01:00
committed by GitHub
parent 673b5245c5
commit 4ff2ca3315
2 changed files with 6 additions and 2 deletions
+1 -1
View File
@@ -548,7 +548,7 @@ class Client {
// Ensure there's a homepage entry in history before adding the lobby entry
if (window.location.hash === "" || window.location.hash === "#") {
history.pushState(null, "", window.location.origin + "#refresh");
history.replaceState(null, "", window.location.origin + "#refresh");
}
history.pushState(null, "", `#join=${lobby.gameID}`);
},
+5 -1
View File
@@ -311,7 +311,11 @@ export class GameRenderer {
this.eventBus.on(RedrawGraphicsEvent, () => this.redraw());
this.layers.forEach((l) => l.init?.());
document.body.appendChild(this.canvas);
// only append the canvas if it's not already in the document to avoid reparenting side-effects
if (!document.body.contains(this.canvas)) {
document.body.appendChild(this.canvas);
}
window.addEventListener("resize", () => this.resizeCanvas());
this.resizeCanvas();