react-scroll
react-scroll copied to clipboard
fisshy
Delay in spy update
There seems to be a delay, sometimes several seconds, before the spy updates the activeClass or calls onSetActive as I scroll down the page... is there a way to configure this? I essentially want it to be immediate.
This appears to afflict Chrome worse than Firefox.
Adding this code seems to fix it
componentDidMount() {
document.getElementById('main').addEventListener('scroll', scrollSpy.update)
}
I'm surprised this is necessary though since I'm already setting containerId="main" on on Link.
If you run the examples
$ npm start
Are they delaying for you as well? Can you provide a plunker illustrating the issue?
An update: after some research, I found these links
- https://bugs.chromium.org/p/chromium/issues/detail?id=570845
- https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
- https://github.com/TryGhost/Ghost/issues/7934#issuecomment-349795002
from which I obtained a workaround by doing the following at the top level of my app:
window.addEventListener('mousewheel', e => {
if (e.deltaY === 1) e.preventDefault()
})
This fixes the behavior described in this issue, however now in its place I get the following warning on the console:
Blink deferred a task in order to make scrolling smoother. Your timer and network tasks should take less than 50ms to run to avoid this. Please see https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail and https://crbug.com/574343#c40 for more information.
which I suspect may be the same underlying problem resurfacing in a different way. After doing some perf measurement I discovered that react-scroll is doing a lot of unnecessary rerendering in a timer thread, which I attempted to improve with #294. However I still see the warning, and it looks like the bigger problem is that setState is being called a quadratic number of times relative to the number of links (#295).
Thank you for doing some research, I will look into your PR and try to fix the issue with the spyhandlers.
tis 26 dec. 2017 kl. 22:35 skrev Tom Crockett [email protected]:
An update: after some research, I found these links
- https://bugs.chromium.org/p/chromium/issues/detail?id=570845
https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
- TryGhost/Ghost#7934 (comment) https://github.com/TryGhost/Ghost/issues/7934#issuecomment-349795002
from which I obtained a workaround by doing the following at the top level of my app:
window.addEventListener('mousewheel', e => { if (e.deltaY === 1) e.preventDefault() })
This fixes the behavior described in this issue, however now in its place I get the following warning on the console:
Blink deferred a task in order to make scrolling smoother. Your timer and network tasks should take less than 50ms to run to avoid this. Please see https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail and https://crbug.com/574343#c40 for more information.
which I suspect may be the same underlying problem resurfacing in a different way. After doing some perf measurement I discovered that react-scroll is doing a lot of unnecessary rerendering in a timer thread, which I attempted to improve with #294 https://github.com/fisshy/react-scroll/pull/294. However I still see the warning, and it looks like the bigger problem is that setState is being called a quadratic time in the number of links (#295 https://github.com/fisshy/react-scroll/issues/295).
— You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/fisshy/react-scroll/issues/288#issuecomment-354045991, or mute the thread https://github.com/notifications/unsubscribe-auth/AC4kA9Q2yTwjV-Z6waMMMuP4QdpvLFNZks5tEbrjgaJpZM4Q6SPa .
-- JOACHIM KARLSSON FULL STACK DEVELOPER +46 736525254 www.causam.se http://www.causam.se
