content-visibility issue fix/hax

schlosser · Dec 21, 2020 · 04f30f4 · 04f30f4
1 parent e941e68
commit 04f30f4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 3 deletions.
diff --git a/_js/progressive-image.js b/_js/progressive-image.js
@@ -131,6 +131,7 @@
       function () {
         if (document.body.className.indexOf(this.id) == -1) {
           this.viewerOpen = false;
+          this.figure.closest("section").style.contentVisibility = "auto";
           this.figure.className = this.figure.className
             .replace("is-open", "")
             .replace(/^\s+|\s+$/g, "");
@@ -183,6 +184,12 @@
       translateX = figureBoundingRect.left * -1;
     }
 
+    try {
+      this.figure.closest("section").style.contentVisibility = "visible";
+    } catch (error) {
+      console.error(error);
+    }
+
     // Apply DOM transformations
     document.body.className += " " + this.id;
     this.figure.className += " is-open";

diff --git a/_scss/_header.scss b/_scss/_header.scss
@@ -33,9 +33,9 @@ footer .footer-wrapper {
 
 .path {
   @extend %h2;
+  margin-bottom: 4rem;
   padding-left: 3.6rem;
   text-indent: -3.6rem;
-  margin-bottom: 4rem;
   user-select: none;
 
   .component {

diff --git a/_scss/_layout.scss b/_scss/_layout.scss
@@ -14,9 +14,9 @@ $text-width: 44rem;
 }
 
 section {
-  margin: 6rem 0;
-  content-visibility: auto;
   contain-intrinsic-size: 1000px; // Total estimate
+  content-visibility: auto;
+  margin: 6rem 0;
 
   &.collection {
     padding: 4.5rem 0;