From c5b90b170313a9f61bc3852be1fae565fd711a8e Mon Sep 17 00:00:00 2001
From: Samuel Maier <samuel.maier2@hotmail.de>
Date: Sat, 22 Jun 2024 14:18:20 +0200
Subject: [PATCH] Fix issues with runaway sizing of the canvas when rendering
 more complex things.

---
 index.html | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 872b4f4c..0e7a3a89 100644
--- a/index.html
+++ b/index.html
@@ -60,15 +60,28 @@
             width: 100%;
         }
 
-        /* Position canvas in center-top: */
+        /* This presumably fixes the issue described below.
+        But it also fixes an issue where, 
+        depending on what you render, the canvas may have sizing issues.
+
+        This issue lead to runaway resizing, as described here:
+        https://github.com/emilk/egui/discussions/4660
+        */
+        /* Position canvas in center-top.
+        This is rather arbitrarily chosen.
+        In particular, it seems like both Chromium and Firefox will still align
+        the canvas on the physical pixel grid, which is required to get
+        pixel-perfect (non-blurry) rendering in egui.
+        See https://github.com/emilk/egui/issues/4241 for more */
         canvas {
             margin-right: auto;
             margin-left: auto;
             display: block;
             position: absolute;
-            top: 0%;
-            left: 50%;
-            transform: translate(-50%, 0%);
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
         }
 
         .centered {