"Back to Top" Button flickers while scrolling toward the top of page

[holmanb]

Cloud-init's docs recently switched to furo. I just noticed while testing some changes on mobile (Android) that my average read/scroll speed apparently works out to be such that the button flickers while I'm scrolling. Not a huge deal, but pretty annoying.

I'm not sure if this is expected - on desktop Firefox this button only appears while scrolling upwards, which I'm not doing on mobile.

I'm not sure whether this is a weird mobile interaction, a bug, or if
it would be preferable to just debounce the "Back to Top" button so that it doesn't flicker. I doubt that this solution is preferred, but it would stop the flickering which would be "good enough" for me.

Has anyone else noticed this?

[pradyunsg]

What mobile browser are you using, what's the screen resolution and what's the device pixel ratio?

I've seen this in the past with Safari on iOS, but not on Firefox for Android. I wouldn't be surprised if there's some weirdness around how the scroll position on the page is handled by mobile browsers; especially on hi-dpi screens.

[holmanb]

What mobile browser are you using

Firefox

what's the screen resolution

1080 x 2340

what's the device pixel ratio

2.609

[pradyunsg]

what's the device pixel ratio

2.609

Wow. TIL this can be a default value!

[pradyunsg]

Well, in case someone else can spot something off about the logic involved here:

furo/src/furo/assets/scripts/furo.js

Lines 19 to 30 in da0674a

	function scrollHandlerForBackToTop(positionY) {
	if (positionY < GO_TO_TOP_OFFSET) {
	document.documentElement.classList.remove("show-back-to-top");
	} else {
	if (positionY < lastScrollTop) {
	document.documentElement.classList.add("show-back-to-top");
	} else if (positionY > lastScrollTop) {
	document.documentElement.classList.remove("show-back-to-top");
	}
	}
	lastScrollTop = positionY;
	}

[holmanb]

I wouldn't be surprised if there's some weirdness around how the scroll position on the page is handled by mobile browsers; especially on hi-dpi screens.

Now that you mention it, I notice that text also shifts vertically by a pixel when this happens. This shift is much less noticeable than a button flashing in and out of existence, which I was much more focused on.

[pradyunsg]

I'm able to reproduce this on my phone (3.000 DPR) if I scroll really slowly.

[holmanb]

I wonder if this could be debounced by with something like: "track the last N positions, and don't add/remove unless these positions are all increasing/decreasing", using heuristics to find N.

[pradyunsg]

Closing in favor of #681, which is the tracking issue for fixing this. :)