From 4ff2ca3315db4a92a2dd0448be602c1dafdc42f1 Mon Sep 17 00:00:00 2001
From: Lavodan <21205085+Lavodan@users.noreply.github.com>
Date: Thu, 4 Dec 2025 00:41:58 +0100
Subject: [PATCH] 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
---
 src/client/Main.ts                  | 2 +-
 src/client/graphics/GameRenderer.ts | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/client/Main.ts b/src/client/Main.ts
index ade475838..6425c137f 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -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}`);
       },
diff --git a/src/client/graphics/GameRenderer.ts b/src/client/graphics/GameRenderer.ts
index 1410cdbbd..50911c8db 100644
--- a/src/client/graphics/GameRenderer.ts
+++ b/src/client/graphics/GameRenderer.ts
@@ -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();