Giter Site home page Giter Site logo

demo bug about react-cool-inview HOT 6 CLOSED

wellyshen avatar wellyshen commented on July 20, 2024
demo bug

from react-cool-inview.

Comments (6)

max-sym avatar max-sym commented on July 20, 2024

@Dogtiti thanks for reporting.
What was your browser, OS and what did you do to achieve this?

from react-cool-inview.

Dogtiti avatar Dogtiti commented on July 20, 2024

@max-sym Chrome 98.0.4758.102
I don't know what did I do ,I just play the demo in normal ways ,and then it shows as above

from react-cool-inview.

max-sym avatar max-sym commented on July 20, 2024

Catched it!
Screenshot 2022-02-15 at 9 00 31 AM

Steps to reproduce: just scroll randomly and fast.
OS: MacOS
Browser:Chrome

from react-cool-inview.

heitorado avatar heitorado commented on July 20, 2024

Hi there! I was trying to build an infinite scroll that updates the page number as the user scrolls (pretty much like the emojis update at the text above the box in the demo website, just using numbers instead). I believe that the bug I found might be related to this one.

Screen.Recording.2022-03-24.at.18.22.27.mov

It happens if as soon as you "arrive" in an element (i.e. the emoji updates), scroll in the opposite direction. It will not trigger the callbacks for the element immediately before the one you arrived (I believe it should, since you are now "going back"). This makes the pagination go crazy and skip pages if the scroll happen in this pattern.

Steps to reproduce (in demo): Scroll down slowly. As soon as the new emoji appears in the text above the box, scroll in the opposite direction. It will not update back to the previous emoji.
OS: MacOS
Browser: Brave

Does anyone have any clues of what may be causing this? I'd be happy to help if possible. Just need some starting point to start investigating.

Thanks for the amazing work, also. Great package.
Cheers.

from react-cool-inview.

wellyshen avatar wellyshen commented on July 20, 2024

Thank you. I can reproduce the bug. I will take the time to fix it when I'm free.

from react-cool-inview.

SaidMarar avatar SaidMarar commented on July 20, 2024

The problem is because the display area (root) takes the viewport as default value in the Intersection observer and also the margin style affect the synchronization between slides.
Now you can notice when both slides reach the half height of the slider, their intersection is triggered.
I made the fix above check it guys ;)
@wellyshen @heitorado

from react-cool-inview.

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.