From 9a51823f19e3d184bed796c149219e69e815d1a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Wed, 20 Oct 2021 10:53:21 +0200
Subject: [PATCH] Don't use CSS zoom.

It's non-standard and an IE-ism. Instead, just set the checkbox size
explicitly to what you want, and multiply the CheckboxLand line-height
(though I'm not sure what that is about).
---
 README.md  |  4 ----
 index.html | 22 ++++++++++++++--------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 5585912..46a55fa 100644
--- a/README.md
+++ b/README.md
@@ -40,10 +40,6 @@ const cbl = new Checkboxland({
 });
 ```
 
-The cursed CSS property [zoom](https://developer.mozilla.org/en-US/docs/Web/CSS/zoom) is used to shrink the checkboxes down. `transform: scale(x)` resulted in worse performance, and worse visuals. Unfortunately, this means that Firefox users need to manually zoom out.
-
-> Non-standard: This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user.
-
 Key events are forwarded to the hidden `<canvas>` to avoid focus issues.
 
 ```js
diff --git a/index.html b/index.html
index c7c95ad..1bf5258 100644
--- a/index.html
+++ b/index.html
@@ -19,22 +19,28 @@
         * {
             font-family: sans-serif;
         }
-        
+
         body {
             padding: 5px;
         }
-        
+
         #hide {
             display: none;
         }
-        
-        #checkboxes {
-            zoom: 0.4;
+
+        #checkboxes > div {
+            line-height: calc(0.4 * 0.75) !important;
+        }
+
+        #checkboxes input {
+            width: calc(0.4 * 13px);
+            height: calc(0.4 * 13px);
             pointer-events: none;
         }
-        
+
         video {
-            zoom: 2;
+            width: 320px;
+            height: 200px;
         }
     </style>
 </head>
@@ -76,4 +82,4 @@
 <script type="module" src="glue.js"></script>
 <script src="doom.js" defer></script>
 
-</html>
\ No newline at end of file
+</html>