russellsamora / scrollama

Scrollytelling with IntersectionObserver.

Home Page:https://russellsamora.github.io/scrollama/basic

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

onStepEnter fails with Chrome on specific screen size

maxdulieu opened this issue · comments

I have noticed this weird behavior when using scrollama on my laptop vs. my desktop, onStepEnter would only be triggered at around 0.8 progress and go straight to 100%. I use Chrome 76.0.3809.87.

It gets solve when I zoom in and out of my browser.

Let me know if you need more info

scrollama

I was able to reproduce this behavior by zooming on my desktop to 150%

Same issue here, I recently updated my app to use scrollama.js instead of waypoint.js to improve performance and encountered this issue on my smartphone (Huawei P10).

BTW, it is also reproducible on Chrome with 150% as mentioned above by @maxdulieu.

Possibly duplicate of "Offset trigger not working properly on Chrome mobile." #87

Another possible duplicate #64

If this is a zoom issue, that is a duplicate (as @pldg mentioned) of #64. If you can paste the code that would be helpful to try and reproduce.

I'm facing the same issue on Chrome (Mac). One of the elements that we're using to trigger changes in the background colour does not get registered when it crosses the threshold level (have noticed this more often on a laptop both with and without an external monitor).

A few interesting observations:

  • It's always the same element that does not get registered
  • This happens only when I scroll up from the bottom of the page
  • This happens only when I scroll really slowly (easier to reproduce using a trackpad compared to a mouse scroll wheel)
  • This happens only above a certain viewport width, at least if an external monitor is connected (specifically, < 1338px)

Please let me know if anyone has ideas on how to work around this problem.

Versions:

  • Scrollama v2.2.1
  • Chrome for Mac v89.0.4389.114 (Official Build) (arm64)
  • MacOS v11.2.3 (20D91)

PS - Zoom is set to the default 100% value; have not played with that at all. Not seeing this issue on Firefox or Safari.