Fix: Zoom issues of the border line in treeview

lapo-luchini · Apr 22, 2024 · ba21d40 · ba21d40
1 parent 0d84f33
commit ba21d40
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git a/index-dark.css b/index-dark.css
@@ -19,6 +19,7 @@
     --dump-bg-color: #0c0e11;
     --dump-border-color: #505050;
     --hover-bg-color: #505050;
+    --zoom-fix: -1px;
 }
 h1 {
     font-weight: 200;
@@ -51,7 +52,7 @@ h1 {
     display: block;
     position: absolute;
     top: calc(var(--spacing) / -1.6);
-    left: -1px;
+    left: var(--zoom-fix);
     width: calc(var(--spacing) + 2px);
     height: calc(var(--spacing) + 1px);
     border: solid #333;

diff --git a/index.css b/index.css
@@ -19,6 +19,7 @@
     --dump-bg-color: #C0C0C0;
     --dump-border-color: #E0E0E0;
     --hover-bg-color: #E0E0E0;
+    --zoom-fix: -1px;
 }
 html, body {
     background-color: var(--page-bg-color);
@@ -248,7 +249,7 @@ header {
     display: block;
     position: absolute;
     top: calc(var(--spacing) / -1.6);
-    left: -1px;
+    left: var(--zoom-fix);
     width: calc(var(--spacing) + 2px);
     height: calc(var(--spacing) + 1px);
     border: solid #999;

diff --git a/index.js b/index.js
@@ -237,3 +237,19 @@ selectTag.onchange = function (ev) {
     let tag = ev.target.selectedOptions[0].value;
     window.location.href = 'https://rawcdn.githack.com/lapo-luchini/asn1js/' + tag + '/index.html';
 };
+
+// zoom fix to have straight lines in treeview
+if (window.devicePixelRatio >= 2  ) {
+    let treecollapse = document.querySelector(':root');
+    treecollapse.style.setProperty('--zoom-fix', '-0.8px');
+} else if (window.devicePixelRatio >= 1.5  ) {
+    let treecollapse = document.querySelector(':root');
+    treecollapse.style.setProperty('--zoom-fix', '-0.5px');
+} else if (window.devicePixelRatio <= 0.81  ) {
+    let treecollapse = document.querySelector(':root');
+    treecollapse.style.setProperty('--zoom-fix', '-1.4px');
+} else if (window.devicePixelRatio <= 0.9  ) {
+    let treecollapse = document.querySelector(':root');
+    treecollapse.style.setProperty('--zoom-fix', '-1.5px');
+}
+   console.log(window.devicePixelRatio);