Issues with scrolling up and dynamic loading

Site Feedback
#1

I’ve encountered an annoying issue lately.

When I scroll down, the dynamic loading works perfectly. As I scroll, the newer content gets added in a way that just feels like scrolling. It’s perfectly smooth.

But, when I scroll up, not only is there a jump every time, but sometimes it will even jump past a comment altogether. This makes the whole thing more difficult to use. Posts need to be able to load in without the viewport losing its place.

Most of the time, of course, I’m scrolling down. So I understand why that experience is prioritized. But there are definitely times where I’m scrolling up to read posts I’ve not seen before. For example, I get a notification about a reply, click to read that, and then scroll up to read what I missed since my last post.

Thus I would like you to look into seeing if there’s a way to fix this jank. I note that it may have something to do with the browser I use, so I’ll report I’m using Chrome 89 on Windows 10. I know Chrome has some automatic attempts to stop scrolling jank, which might be interfering.

#2

I want to add that the main problem is that it loses its place as you scroll, causing it to sometimes skip posts.

I don’t care if it’s a bit visually janky, as long as it still functionally scrolls, making sure that nothing ever gets skipped.

#3

Unfortunately, scrolling up is technically much more challenging than scrolling down, because stuff “above” (especially if it is variable height) affects everything downstream in the layout. It’s more of a fundamental HTML design problem.

One thing to look for is posts with embedded media or other items of variable size. That’ll make it much worse. We try very hard to eliminate variable size items in posts, but since

  • native image posting is disabled here

and

  • downloading of remote images to local (in case the remote image eventually disappears from the internet) is also disabled here

that might be inevitable – embedded remote images are going to be variable size.

#4

I have some ideas, then, based on the underlying problem you state.

  • Is there not some way, though, to set it up where the effective size of the image gets determined before the post is actually added to the DOM, so that you know the full height?

  • Or perhaps you could store the rendered height of external images when they are originally posted. Most of the time those won’t change, but you could also store them again if they do.

  • Alternatively, you could make all images have a fixed rendered height (with whitespace if necessary) when scrolling up.

(I’m saying “rendered height” here since I know that the images tend to have their height changed by the markup).

#5

We do that when the images are copied to local – then we have a copy of the image to process – but since that’s disabled here, it’s not possible unfortunately.

Upward scrolling is a difficult problem in HTML:

#6

None of my recommendations involved actually storing the image locally. That’s the whole point of them. The first two require only storing an image’s rendered height.

My third suggestion doesn’t require storing anything. Just use a div with a fixed height to hold the image. Set the image as the background, and use CSS to tell it not to repeat or scale.

It’s fine if you don’t like these options, but none of them require storing the whole image.

Barebones markup for option 3. (Note this would only used when scrolling up):

<html><body>
  <div style="background: http://example.com/image.png no-repeat; height: 500px"></div>
</body></html>