Horizontal scrolling in mobile view iOS

Question

I have a horizontal gallery overflow-x: scroll that is choppy only in iphone/ipad view (Tested in Androids scrolls fine). I've seen some stackoverflow uses -webkit-overflow-scrolling: touch or scroll-behavior: smooth but both doesn't work. Is this really just an iOS issue? The horizontal scroll works smoothly in desktop chrome and android devices but not the devices stated above.

Just found out that -webkit-overflow-scrolling is not supported in all browsers too https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling#examples

Answer 1

I had this problem since 15.4.1 version of iOS. Found a workaround that fixes this behavior.

html.has-scroll-smooth {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
}

Source: https://github.com/locomotivemtl/locomotive-scroll/issues/350#issuecomment-1032461746

But it didn't work for me for the html tag and I set position: fixed to .wrapper

UPDATE: There was a problem when using position: fixed; Content is dropped from the stream. Using position: sticky; solved the problem.

.wrapper {
    top: 0;
    left: 0;
    height: max-content;
    width: 100vw;
    overflow: hidden;
    position: sticky;
}