Fix icons hover not updating on scroll in Technos section on Safari (#…

…187)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "emerald-website",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"private": true,
 	"scripts": {
 		"dev": "vite",

src/routes/+page.svelte

@@ -276,26 +276,26 @@
 			interval = setInterval(autoScroll, DELAY);
 		});
 
-		// Add listeners to the icons to start/stop the interval on hover
-		[...technoIcons.children].forEach(icon => {
-			icon.addEventListener("mouseenter", () => {
-				clearInterval(interval);
-			});
-
-			icon.addEventListener("mouseleave", () => {
-				interval = setInterval(autoScroll, DELAY);
-			});
-		});
-
 		// Scroll handler to update the hovered icon depending on
 		// the card we scrolled to
-		technoCards.addEventListener("scrollend", () => {
-			if (!technoCards) return; // fix "scrollLeft not found on undefined"?
+		function onTechnoCardsScrollEnd() {
+			if (!technoCards) return; // fix "scrollLeft not found on undefined"
 			const scrollDistance = technoCards.scrollLeft;
 			const containerWidth = technoCards.clientWidth;
 			currentCard = Math.round(scrollDistance / containerWidth);
 			hoverIcon(currentCard);
-		});
+		}
+
+		if ("onscrollend" in window) {
+			technoCards.addEventListener("scrollend", onTechnoCardsScrollEnd);
+		} else {
+			// Safari fallback
+			let i: ReturnType<typeof setTimeout>;
+			technoCards.addEventListener("scroll", () => {
+				clearTimeout(i);
+				i = setTimeout(onTechnoCardsScrollEnd, 100);
+			});
+		}
 
 		// On destroy, clear the interval
 		return () => clearInterval(interval);