Disable home header background on iPhone (#782)

crystal-lang · Apr 22, 2024 · 7a1d2f8 · 7a1d2f8
1 parent 0fb411d
commit 7a1d2f8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/_sass/pages/_home.scss b/_sass/pages/_home.scss
@@ -34,7 +34,9 @@
 
   color: var(--primary-text);
 
-  &::before {
+  // FIXME: Disabled as a workaround to fix rendering in Safari on iPhone
+  // See https://github.com/crystal-lang/crystal-website/issues/758#issuecomment-2053688906
+  html:not([data-ua-iphone]) &::before {
     content: "";
     position: absolute;
     display: block;
@@ -49,10 +51,8 @@
     background-image: url(/assets/home/pattern.svg);
     background-repeat: no-repeat;
 
-    // FIXME: Disabled as a workaround to fix rendering in Safari on iPhone
-    // See https://github.com/crystal-lang/crystal-website/issues/758#issuecomment-2053688906
-    // background-size: clamp(30vw, max(80rem, 50vw), 250vw) auto;
-    // background-position: clamp(-15vw, -40rem + 50vw, 0px) top;
+    background-size: clamp(30vw, max(80rem, 50vw), 250vw) auto;
+    background-position: clamp(-15vw, -40rem + 50vw, 0px) top;
   }
 
   > * {

diff --git a/assets/js/_main.js b/assets/js/_main.js
@@ -1,7 +1,20 @@
-document.addEventListener("DOMContentLoaded", function() {
+const startLogoAnimation = function() {
   const canvas = document.getElementById("logo-canvas")
   var model = new Viewer3D(canvas);
   model.shader("flat", 255, 255, 255);
   model.insertModel("/assets/icosahedron.xml");
   model.contrast(0.90);
+}
+
+const setIPhoneDataAttribute = function() {
+  let platform = navigator?.userAgent || navigator?.platform || 'unknown'
+
+ if(/iPhone/.test(platform)) {
+  document.documentElement.dataset.uaIphone = true;
+ }
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  setIPhoneDataAttribute()
+  startLogoAnimation()
 })