Scroll jank when scrolling up

기여 기능
1

Scroll to the bottom of a long thread and refresh the page.

Grab the scroll bar and scroll up to the top of the page. You’ll see a loading spinner while the previous posts load. (You can make this problem more obvious using a network conditioning tool, e.g. Chrome Dev Tools Network tab, Slow 3G.)

Actual: As the posts load, the scroll jumps around.

In the linked video, you can see that RBoy’s post #76 “Maybe codinghorror can confirm” is at the top of the screen; then, when the subsequent page finished loading, the scroll jumps up to lid’s post #9 “It will be interesting to see if…”

Expected: The previous page should appear without disturbing the scroll position; whatever I saw on the screen as the previous page loads should still be on the screen when it’s drawn in.

2

Onebox seems not to be working with my Google Drive link. Let’s see if this works: https://drive.google.com/open?id=1ny2zYNegggQ3uPlhG9t-tEB3xkUSepcE

3

That just looks like posts are loading as you scroll up. It’s worse when you limit network speeds because the data takes longer to traverse a slower network.

Try scrolling using the handle on the timeline scroller. It won’t jump around because more posts aren’t being loaded ahead and causing the position of the scrollbar to be recalculated. It’s a big part of why it’s there to begin with.

4

I agree that this is happening because the posts are loading. With a slow network, I can reproduce this just scrolling with trackpad/mouse wheel. (Would it help to post a demo video of that?)

This problem is occurring only when scrolling up because when scrolling down, Discourse draws in a bunch of grey filler; when the posts become available, they pop in right where they’re supposed to be and the scroll doesn’t jank.

5

It happens because pages are rendered from top to bottom, Discourse doesn’t know the height of posts before they arrive. I can see the scrollbar hopping around as you drag up, using the scroller at least mitigates against the problem by scrolling to the absolute top of each reply.

2개의 좋아요
6

I think all that’s needed is grey filler at the top, just like scrolling down.

7

@eviltrout spent a fair amount of time optimizing up scroll, it was quite a few years ago so maybe we are due to have one more look

3개의 좋아요
8

For the record, this is a very difficult problem. And scrolling down is fundamentally different because you’re not stacking things on top of the viewport. A variable height post causes no problems when added to the bottom, but consider what it does when stacked on top.

5개의 좋아요
9

최근 저희 커뮤니티에서는 위로 스크롤할 때 화면이 떨리거나 버벅이는 현상이 발생하기 시작했습니다:

이것은 순수한 소프트웨어 문제인가요? 위로 스크롤할 때 사용자 경험을 최적화하기 위해 추가로 할 수 있는 것이 있을까요?

10

광고 없이도 가능합니까?

11

그렇습니다. 저는 모더레이터로 로그인해 있으니 광고가 보이지 않아요. 그리고 위로 스크롤할 때 여전히 버그가 발생합니다.

사용자가 너무 빠르게 위로 스크롤할 때 소프트웨어가 "뒤로 점프"하지 않도록 하는 것이 합리적인가요? 위에서 설명한 대로, 사용자가 너무 빠르게 위로 스크롤하면 게시물이 제대로 렌더링되지 않아서 문제가 발생하는 것 같습니다. 이전 게시물 로딩이 완료된 후 화면이 뒤로 점프하는 것보다는 화면이 잠시 멈추는 편이 낫습니다. 후자의 방식이 사용자를 더 혼란스럽게 하지 않으니까요.

12

안전 모드에서 어떤 일이 일어나는지도 궁금합니다. Using Safe Mode to troubleshoot issues with themes and plugins

1개의 좋아요
13

안전 모드에서도 그런가요 @littleviolette ?

1개의 좋아요
14

방금 일반 모드와 안전 모드에서 문제를 재현해 보았습니다. 문제는 재현되지 않았습니다. 2일 전에 Discourse를 업데이트했는데, 이로 인해 동작 방식이 변경되었는지 확실하지 않습니다. 커뮤니티에 추가적인 피드백을 요청하겠습니다. 후속 조치를 취해 주셔서 감사합니다!

4개의 좋아요
15

저희 사이트에서도 이와 관련된 보고가 많이 접수되고 있습니다. 방금 테스트해 보았더니 안전 모드에서도 여전히 문제가 발생하고 있습니다. 최근 보고 사항 중 일부:

2개의 좋아요
16
1개의 좋아요
17

이전에는 비정상적인 설정(이미지 크기 가져오지 않음)이 적용된 사이트에서 이미지가 리사이즈될 때 스크롤 점프가 발생하는 문제가 있었습니다. 이 문제는 이제 수정되었습니다. 해당 설정은 스스로 문제를 일으키는 설정이었기 때문에 제거했습니다. 해당 설정이 활성화되어 있었는지 확인해 보시기 바랍니다.

또 다른 가능한 원인은 광고입니다.

기본적으로 뷰포트가 동적으로 리사이즈되는 모든 요소가 큰 문제를 일으킵니다.