Fix content scrolling (Apple WebKit) (#36)

* add face-content wrapper * Refactor class names * force focus on face content * blur focused element * fix scrolling + refactor * increase outline to 2px * fix content-cube outline offset * improve outline size cross-platform
chadsr · Dec 5, 2021 · 647b2d3 · 647b2d3
1 parent 374bc70
commit 647b2d3
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 148 deletions.
diff --git a/src/scripts/escher.ts b/src/scripts/escher.ts
@@ -27,6 +27,7 @@ export default class EscherCubes {
         // Render svg container
         const parentSVG = document.createElementNS(SVG_NAMESPACE_URI, 'svg');
         parentSVG.setAttribute('id', svgId);
+        parentSVG.classList.add(svgId);
 
         // Get the container and append the svgId to it
         const container = document.getElementById(containerId);

diff --git a/src/scripts/main.ts b/src/scripts/main.ts
@@ -154,6 +154,9 @@ function rotateTo(side: number) {
         const focusFace = cube.querySelector(`.face-${side}`);
         focusFace.classList.add('focus');
 
+        // remove any active focused element
+        if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+
         const currentClass = cube.className.match(/(?:^|)rotate-([\d]+)/)[0];
 
         // Replace the existing class with one matching the newly focused side (While preserving any other classes)

diff --git a/src/stylesheets/media.scss b/src/stylesheets/media.scss
@@ -8,66 +8,23 @@ $bp-larger-than-desktophd: 'min-width: 1200px' !default;
 
 // Mixin function handling all styles related to the cube over different sizes of width/height in pixels
 @mixin content-cube($size) {
-    @include cube-transform($size);
-
-    #content-cube {
-        width: $size;
-        height: $size;
-    }
-}
-
-@mixin cube-transform($size) {
     .perspective {
         perspective: $size * 2;
         perspective-origin: center;
     }
 
     .content-cube {
-        transform-origin: center center (-(math.div($size, 2)));
+        width: $size;
+        height: $size;
 
         &.webkit {
             // fixes https://bugs.webkit.org/show_bug.cgi?id=88587
             // TODO: remove if that bug is ever fixed
             translate: 0 0 (-(math.div($size, 2)));
         }
 
-        > .face {
-            &.face-top {
-                transform: rotateX(90deg) translateZ(math.div($size, 2)) translateY(-(math.div($size, 2)));
-            }
-            &.face-bottom {
-                transform: rotateX(-90deg) translateZ(math.div($size, 2)) translateY((math.div($size, 2)));
-            }
-            &.face-left {
-                transform: rotateY(-90deg) translateZ(math.div($size, 2)) translateX(-(math.div($size, 2)));
-            }
-            &.face-right {
-                transform: rotateY(90deg) translateZ(math.div($size, 2)) translateX(math.div($size, 2));
-            }
-            &.face-back {
-                transform: rotateY(180deg) translateZ($size);
-            }
-        }
-
-        &.rotate {
-            &-0 {
-                transform: rotateY(0deg);
-            }
-            &-1 {
-                transform: rotateY(-90deg);
-            }
-            &-2 {
-                transform: rotateY(-180deg);
-            }
-            &-3 {
-                transform: rotateY(-270deg);
-            }
-            &-4 {
-                transform: rotateX(-270deg);
-            }
-            &-5 {
-                transform: rotateX(-90deg);
-            }
+        .face {
+            transform-origin: center center (-(math.div($size, 2)));
         }
     }
 }
@@ -83,7 +40,7 @@ $bp-larger-than-desktophd: 'min-width: 1200px' !default;
         }
     }
 
-    .content-cube > .face > .content {
+    .content-cube > .face > .face-content {
         padding: 8px;
     }
 }

diff --git a/src/stylesheets/nojs.css b/src/stylesheets/nojs.css
@@ -34,12 +34,12 @@ body.nojs-styles header, body.nojs-styles #contact-form {
     display: none;
 }
 
-body.nojs-styles #content {
+body.nojs-styles .content {
     margin: 0 15%;
     overflow-x: hidden;
 }
 
-body.nojs-styles .content {
+body.nojs-styles .content-section {
     margin: 0 32px;
 }
 
@@ -84,7 +84,7 @@ body.nojs-styles ul {
     list-style-type: none;
 }
 
-body.nojs-styles .content li {
+body.nojs-styles .content-section li {
     width: 100%;
     float: left;
 }
@@ -117,7 +117,7 @@ body.nojs-styles .face {
     float: left;
 }
 
-body.nojs-styles .face .content ul > li::before {
+body.nojs-styles .face .content-section ul > li::before {
     font-family: 'Macula', 'serif';
     content: '>';
     display: inline-block;
@@ -127,12 +127,12 @@ body.nojs-styles .face .content ul > li::before {
     margin: 4px 0;
 }
 
-body.nojs-styles .face .content ul > li ul > li::before {
+body.nojs-styles .face .content-section ul > li ul > li::before {
     font-size: 24px;
     line-height: 48px;
 }
 
-body.nojs-styles .face .content ul > li ul > li {
+body.nojs-styles .face .content-section ul > li ul > li {
     margin: 0;
 }