restrict progressive enhancement #59 (WIP)

openmindculture · Oct 9, 2023 · 9277eec · 9277eec
1 parent 00ffb06
commit 9277eec
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/src/css/m_stories.css b/src/css/m_stories.css
@@ -203,8 +203,10 @@ body.single-story .stories__story__quote {
   }
 
   @media (hover: none) {
-      .stories__navigation {
+    @media not (prefers-reduced-motion) {
+      body:not(.prefers-reduced-motion) .stories__navigation {
         display: none;
       }
     }
+  }
 }
diff --git a/src/css/z_decoration.css b/src/css/z_decoration.css
@@ -145,6 +145,8 @@ body.page.home .decoration__container { /* decoration-parallax-layer-background
   }
 }
 
+
+
 @media (prefers-reduced-motion) {
   body.archive .decoration__container,
   body.category .decoration__container,
@@ -153,3 +155,8 @@ body.page.home .decoration__container { /* decoration-parallax-layer-background
     transform: translateZ(0);
   }
 }
+
+/* stylelint-disable-next-line no-descending-specificity */
+body.prefers-reduced-motion .decoration__container {
+  transform: translateZ(0);
+}
diff --git a/src/js/scripts.js b/src/js/scripts.js
@@ -76,6 +76,9 @@ window.kleiderordnung = {
       rootMargin: '0px',
       threshold: 0.1
     },
+    /** @type {boolean} */ supportsSuppportsColorSchemeQuery: false,
+    /** @type {boolean} */ prefersMoreContrast: false,
+    /** @type {boolean} */ prefersReducedMotion: false,
     removableButtonsClassName: 'button__remove', // elements to be removed by consent handling
     scrollingClassName: 'scrolling',
     scrollingClassTimeout: 2000,
@@ -110,8 +113,23 @@ document.addEventListener('DOMContentLoaded', function () {
 
     var prefersMoreContrastQuery = window.matchMedia('(prefers-contrast: more)');
     window.kleiderordnung.config.prefersMoreContrast = (prefersMoreContrastQuery.matches);
+
+    var supportsColorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    window.kleiderordnung.config.supportsSuppportsColorSchemeQuery = (supportsColorSchemeQuery.matches);
   }
 
+  // explicitly disable progressive enhancements to prevent bugs in outdated Apple browsers
+  // the following query / hack should target mobile Safari up to version 12
+  try {
+    if (/iPhone/.test(navigator.userAgent && window.kleiderordnung.config.supportsSuppportsColorSchemeQuery)) {
+      window.kleiderordnung.config.prefersReducedMotion = true;
+      if (document.body.classList && typeof(document.body.classList.add === 'function')) {
+        document.body.classList.add('prefers-reduced-motion');
+      }
+    }
+  } catch(e) {}
+
+
   kleiderordnung_activateIntroAnimation(window.kleiderordnung.config);
   kleiderordnung_observeStickyHeader(window.kleiderordnung.config);
   kleiderordnung_observeWaypointAnchors(window.kleiderordnung.config);