Some fixes for scroll

Author: James1x0

index.html

@@ -529,39 +529,48 @@ <h2 class="sponsors-subtitle text-title">
 What are you doing here? You should go register for BSDC instead: https://bsdc25.eventbrite.com
     `);
 
-    // Improved navbar scroll handling for smoother experience, especially on mobile
-    (function () {
+    // Improved scroll performance with requestAnimationFrame
+    (function() {
       const nav = document.querySelector('#navbar');
-      let lastScrollY = window.scrollY;
+      let lastKnownScrollPosition = 0;
       let ticking = false;
-
-      function checkNav () {
-        // Use getBoundingClientRect for more accurate position on mobile
-        const top = window.innerHeight / 3;
-        if (window.scrollY >= top) {
+      
+      function updateNavbar(scrollPos) {
+        const threshold = window.innerHeight / 3;
+        if (scrollPos >= threshold) {
           nav.classList.add('fixed');
         } else {
           nav.classList.remove('fixed');
         }
-        ticking = false;
       }
 
-      function onScroll () {
+      // Throttled scroll handler
+      document.addEventListener('scroll', function(e) {
+        lastKnownScrollPosition = window.scrollY;
+
         if (!ticking) {
-          window.requestAnimationFrame(checkNav);
+          window.requestAnimationFrame(function() {
+            updateNavbar(lastKnownScrollPosition);
+            ticking = false;
+          });
+
           ticking = true;
         }
-      }
-
-      window.addEventListener('scroll', onScroll, { passive: true });
+      }, {passive: true}); // Passive listener for better performance
 
-      // Also check on resize, as viewport height may change on mobile
-      window.addEventListener('resize', function () {
-        checkNav();
-      }, { passive: true });
+      // Handle resize events
+      let resizeTimeout;
+      window.addEventListener('resize', function() {
+        if (resizeTimeout) {
+          clearTimeout(resizeTimeout);
+        }
+        resizeTimeout = setTimeout(function() {
+          updateNavbar(lastKnownScrollPosition);
+        }, 66); // Debounced to run max every 66ms
+      }, {passive: true});
 
       // Initial check
-      checkNav();
+      updateNavbar(window.scrollY);
     })();
 
     document.querySelectorAll('.speakers > #speakers-images > .speaker-info').forEach(function ($speaker) {

style.css

@@ -8,6 +8,8 @@ body {
   position: relative;
   margin: 0;
   overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 html {
@@ -24,7 +26,7 @@ html {
   overflow: hidden;
   /* background: white; */
   position: fixed;
-  z-index: 1;
+  z-index: 100;
   left: 0;
   right: 0;
   top: 0;
@@ -35,12 +37,17 @@ html {
   align-self: stretch;
   height: 180px;
   transition: all ease-in-out 0.4s;
+  will-change: transform, height;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  background: transparent;
 }
 
 #navbar.fixed {
   background: rgba(255, 255, 255, 0.8);
   height: 60px;
-  z-index: 100;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
 }
 
 .text-background {
@@ -425,6 +432,9 @@ x p {
   display: flex;
   align-items: center;
   justify-content: center;
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
 }
 
 .bison-herd {
@@ -1337,13 +1347,15 @@ a {
   flex-direction: column;
   align-items: center;
   gap: 1rem;
-  transition: all 0.2s ease-in-out;
+  transition: transform 0.2s ease-in-out;
   position: relative;
   cursor: pointer;
+  will-change: transform;
+  transform: translateZ(0);
 }
 
 .speaker:hover {
-  transform: scale(1.02);
+  transform: scale(1.02) translateZ(0);
   z-index: 5;
 }
 
@@ -1407,7 +1419,9 @@ a {
   gap: 0.5rem;
   border-left: 6px solid #D6FF62;
   position: relative;
-  transition: box-shadow 0.2s;
+  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
+  will-change: transform, box-shadow;
+  transform: translateZ(0);
 }
 
 .schedule-block > .block-extra {
@@ -1427,6 +1441,7 @@ a {
 
 .schedule-block:hover {
   box-shadow: 0 0 0 2px #D6FF62, 0 10px 24px -8px rgba(0,0,0,0.7);
+  transform: translateY(-2px) translateZ(0);
   z-index: 2;
 }
 
@@ -1515,3 +1530,23 @@ a {
   pointer-events: none;
 }
 
+/* Optimize animations */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Force hardware acceleration for fixed elements */
+.fixed {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000;
+  -webkit-transform: translateZ(0);
+  -webkit-backface-visibility: hidden;
+  -webkit-perspective: 1000;
+}
+