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 `` 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; } @@ -76,4 +82,4 @@ - \ No newline at end of file +