Coder Social home page Coder Social logo

Comments (6)

Nemo64 avatar Nemo64 commented on May 28, 2024

I implemented a Workaround like this:

// fix scroll snap vs scroll-behavior-polyfill fight
const disableScrollSnap = () => document.scrollingElement.style.scrollSnapType = 'none';
const enableScrollSnap = () => document.scrollingElement.style.scrollSnapType = '';
window.addEventListener('wheel', enableScrollSnap, passiveEvents.hasSupport ? {passive: true} : false);
window.addEventListener('touchstart', enableScrollSnap, passiveEvents.hasSupport ? {passive: true} : false);
document.addEventListener('click', disableScrollSnap, true);
disableScrollSnap();

This needs to be in the block executed when the polyfill is loaded.

from scroll-behavior-polyfill.

wessberg avatar wessberg commented on May 28, 2024

Hi there. Sorry for the late reply! Thanks for bringing this to my attention. I'll see if I can add special case handling for this. Do you have a repro I can take a look at where I can easily replicate the behavior you are observing in Safari?

from scroll-behavior-polyfill.

Nemo64 avatar Nemo64 commented on May 28, 2024

I tried to create a small fiddle but it had the problem that safari does not seem to support scroll-snap in iframes? I'm not entirely sure but I created a small html file that reproduces it:

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style>
        html, body {
            scroll-snap-type: y proximity;
            scroll-behavior: smooth;
        }

        [id^=a] {
            height: 90vh;
            border: 5px solid black;
            scroll-snap-align: center;
        }

        [id^=a]:nth-child(odd) {
            background-color: green;
        }
    </style>
</head>
<body scroll-behavior="smooth">
    <ul style="position: fixed; left: 0; top: 0; background: white;">
        <li><a href="#a1">anker1</a></li>
        <li><a href="#a2">anker2</a></li>
        <li><a href="#a3">anker3</a></li>
        <li><a href="#a4">anker4</a></li>
    </ul>
    <div id="a1">1</div>
    <div id="a2">2</div>
    <div id="a3">3</div>
    <div id="a4">4</div>
    <script crossorigin src="https://polyfill.app/api/polyfill?features=scroll-behavior"></script>
</body>
</html>

from scroll-behavior-polyfill.

wessberg avatar wessberg commented on May 28, 2024

Thanks for your repro!

I've fixed this issue and have released it as part of v2.09. It isn't yet live on polyfill.app if that's what you're using. Please report back to me if you still experience issues.

from scroll-behavior-polyfill.

simeyla avatar simeyla commented on May 28, 2024

Just as a point of reference - I am using:

  • Safari iOS 15 Beta 4
  • Native CSSOM View Smooth Scrolling experimental feature enabled
  • No polyfill

And I still see this awful 'fighting' behavior when doing element.scrollTo({ behavior: 'smooth', left: 1000 }) (which would skip several slides) - even with the native scrolling (which is still behind a flag).

scroll-snap-stop: normal is supposed to allow scrolling to 'pass over' snap stops but it just doesn't seem to work.

from scroll-behavior-polyfill.

gluecksmensch avatar gluecksmensch commented on May 28, 2024

I can confirm, scrollTo doesn't work with scroll-snap-type applied to an element.

from scroll-behavior-polyfill.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.