From 3affda1b7019186bd67bcf209e01a9a7f2cc4a7e Mon Sep 17 00:00:00 2001
From: krishpranav <krisna.pranav@gmail.com>
Date: Tue, 19 May 2026 19:41:59 +0530
Subject: [PATCH] fix(card-carousel): use CSS scroll-behavior instead of JS
 behavior:'smooth'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The click handler was calling scrollBy() with an explicit ScrollToOptions
{ behavior: 'smooth' }, which overrides the element's CSS scroll-behavior
property. On WebKit (Safari / iOS), this combination with scroll-snap-type:
mandatory prevents the snap point from being committed — the carousel either
fails to move or lands between slides.

The fix drops ScrollBehavior::Smooth and ScrollToOptions entirely, switching
to scroll_by_with_x_and_y(delta, 0.0). This matches the original JS
implementation which relied on the track's CSS scroll-smooth class for
animation and let the browser's native snap logic run uninterrupted.

Removed the now-unused ScrollBehavior and ScrollToOptions web-sys features
from the workspace Cargo.toml.
---
 Cargo.toml                                         | 2 --
 app_crates/registry/src/hooks/use_card_carousel.rs | 9 ++++-----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/Cargo.toml b/Cargo.toml
index 324e68c..0ba619f 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -102,8 +102,6 @@ web-sys = { version = "0.3", default-features = false, features = [
     "Navigator",
     "Node",
     "NodeList",
-    "ScrollBehavior",
-    "ScrollToOptions",
     "Request",
     "RequestInit",
     "RequestMode",
diff --git a/app_crates/registry/src/hooks/use_card_carousel.rs b/app_crates/registry/src/hooks/use_card_carousel.rs
index a945318..67b3a0d 100644
--- a/app_crates/registry/src/hooks/use_card_carousel.rs
+++ b/app_crates/registry/src/hooks/use_card_carousel.rs
@@ -2,7 +2,7 @@ use std::cell::RefCell;
 
 use wasm_bindgen::JsCast;
 use wasm_bindgen::closure::Closure;
-use web_sys::{Element, Event, EventTarget, ScrollBehavior, ScrollToOptions};
+use web_sys::{Element, Event, EventTarget};
 
 const CAROUSEL_ROOT: &str = r#"[data-name="CardCarousel"]"#;
 const CAROUSEL_TRACK: &str = r#"[data-name="CardCarouselTrack"]"#;
@@ -68,10 +68,9 @@ fn handle_click(event: Event) {
     let is_prev = buttons.item(0).and_then(|n| n.dyn_into::<Element>().ok()).is_some_and(|first| first == btn);
 
     let delta = f64::from(track.client_width()) * if is_prev { -1.0 } else { 1.0 };
-    let opts = ScrollToOptions::new();
-    opts.set_left(delta);
-    opts.set_behavior(ScrollBehavior::Smooth);
-    track.scroll_by_with_scroll_to_options(&opts);
+    // No explicit behavior — CSS scroll-smooth on the track handles the animation,
+    // and avoids a known WebKit bug where behavior:'smooth' breaks snap-mandatory.
+    track.scroll_by_with_x_and_y(delta, 0.0);
 }
 
 // ── Scroll handler ────────────────────────────────────────────────────────────