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