Fix alignment js logic

index.css

@@ -178,10 +178,8 @@ img, video {
   width: 100%;
   padding-bottom: calc(
     round(
-      up, 
+      nearest, 
-      var(--line-height) - (
+      round(up, var(--real-height), var(--line-height)) - var(--real-height),
-        var(--real-height) - round(down, var(--real-height), var(--line-height))
-      ),
       1px
     )
   );
@@ -226,6 +224,11 @@ li {
   line-height: 0;
 }
 
+::-webkit-scrollbar {
+    height: var(--line-height);
+}
+
+
 .tree, .tree ul {
   position: relative;
   padding-left: 0;
@@ -282,6 +285,6 @@ li {
   /*display: none;*/
 }
 
-body :not(.grid) {
+.off-grid {
   background: rgba(255, 0, 0, 0.1);
 }

index.js

@@ -1,32 +1,73 @@
+function firstEvent(element, name) {
+  return new Promise(resolve => {
+    element.addEventListener(name, resolve);
+  });
+}
+
+const defaultRatio = 16/9;
+
 // Set the ratio variable on each media.
-document.querySelectorAll("img, video").forEach(media => {
+function setRatios() {
+  const medias = document.querySelectorAll("img, video");
+  for (media of medias) {
     function onLoaded() {
-    var ratio = 1;
+      var ratio = defaultRatio;
       switch (media.tagName) {
         case "IMG":
           ratio = media.naturalWidth / media.naturalHeight;
           break;
         case "VIDEO":
+          if (media.videoWidth != 0 && media.videoHeight != 0) {
             ratio = media.videoWidth / media.videoHeight;
+          }
           break;
       }
+      console.log("Setting ratio", ratio, "for element", media);
       media.style.setProperty("--ratio", ratio);
     }
       switch (media.tagName) {
         case "IMG":
-        if (media.loaded) {
+          if (!media.loaded) {
-          onLoaded();
+            media.style.setProperty("--ratio", defaultRatio); // default while loading
-        } else {
+            firstEvent(media, "load").then(onLoaded);
-          media.addEventListener("load", onLoaded);
+            console.log("Image loaded", media);
           }
           break;
         case "VIDEO":
-        if (media.readystate == 4) {
+          if (media.readyState != 4) {
-          onLoaded();
+            media.style.setProperty("--ratio", defaultRatio); // default while loading
-        } else {
+            firstEvent(media, "loadeddata").then(onLoaded);
-          media.style.setProperty("--ratio", 16/9); // default while loading
+            console.log("Video ready", media);
-          media.addEventListener("loadedmetadata", onLoaded);
           }
           break;
       }
-});
+      onLoaded();
+  }
+}
+
+setRatios();
+
+function checkOffsets() {
+  const targetNode = document.body;
+  const config = { childList: true, subtree: true };
+
+  const callback = () => {
+    const elements = document.querySelectorAll("body *");
+    for (const element of elements) {
+      const offset = element.offsetTop % 10;
+      if(element.offsetParent == document.body && offset > 0) {
+        element.classList.add("off-grid");
+        console.error("Incorrect vertical offset:", element, element.offsetTop % 20);
+      } else {
+        element.classList.remove("off-grid");
+      }
+    }
+  };
+
+  callback();
+
+  const observer = new MutationObserver(callback);
+  observer.observe(targetNode, config);
+}
+
+window.addEventListener("load", checkOffsets);