How to disable Snap Scroll for Safari?

[GNP]

Hi,

Snap Scroll has become a very helpful feature for my website. However since Safari doesn't take too well to scap scrolls, I'm trying to disable this specifically for the iPhone Safari browser.

for reference here is the site link: https://www.graynoteprods.com

I've come across this to insert between the head tags:

<style>
/* Targets Safari on both macOS and iOS */
@supports (font: -apple-system-body) {
html, body {
scroll-snap-type: none !important;
}
}
</style>

I've tried this, but it still doesn't work. Any advice would be appreciated!

[Pablo]

You can disable snap scroll via the 'breakpoint' property in the RWD tab.

[GNP]

Thanks, but I actually want Snap Scroll for Android devices as well as other browsers. It works perfectly on those.

I just want Safari exempted alone. Is there anyway to do this?

[Pablo]

I'm sorry, there is no option to disable it for specific device types.

[BaconFries]

The example below is provided "AS IS" and untested..

"You can disable scroll snapping in Safari only by using a Safari‑specific CSS hack. Safari is the only major browser that supports the @supports (-webkit-touch-callout: none) feature query, which makes it perfect for targeting Safari without affecting Chrome/Firefox/Edge"

Code: Select all

<style>
/* Target Safari only */
@supports (-webkit-touch-callout: none) {
    html, body, * {
        scroll-snap-type: none !important;
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }
}
</style>

[GNP]

The example below is provided "AS IS" and untested..

"You can disable scroll snapping in Safari only by using a Safari‑specific CSS hack. Safari is the only major browser that supports the @supports (-webkit-touch-callout: none) feature query, which makes it perfect for targeting Safari without affecting Chrome/Firefox/Edge"

Code: Select all

<style>
/* Target Safari only */
@supports (-webkit-touch-callout: none) {
    html, body, * {
        scroll-snap-type: none !important;
        scroll-snap-align: none !important;
        scroll-snap-stop: normal !important;
    }
}
</style>

Yup, I've seen this one. Trying it out now. Will report back!

[GNP]

Okay! I tried an even more robust code:

<style>
/* Robust target for latest iOS Safari */
@supports (-webkit-touch-callout: none) {
html, body, * {
scroll-snap-type: none !important;
scroll-snap-align: none !important;
scroll-snap-stop: normal !important;
scroll-behavior: auto !important; /* Prevents stuttering on 120Hz screens */
}
}
</style>


I've checked with a friend with the latest iphone and safari, and the glitchy scrolling problem is no more! Least I hope that's for the majority of iphone users out there....in the meantime, I still can have Snap Scroll for Android and other browsers. Best.

[GNP]

Oh, and echoing many, many web devs out there:

F*** Safari!