1525586 - Content jumping still happening in some cases after scroll anchoring was implemented

Status: RESOLVED DUPLICATE of bug 1520581

(Core :: Layout, defect, P3)

Description

[matteo]

Content jumping is still happening when the page is scrolled through JavaScript, even after the implementation of scroll anchoring.

Steps to reproduce:

Open this URL: https://discuss.flarum.org/d/5293-rainbow-comic-sans/22
Making sure there's no cache on the images in the page.

What happens:

The post with ID 21 by "0E800" is shown. You can view the ID of the message by clicking the date near the author of the post.

What should happen:

The post with ID 22 by "Ralkage" should be shown instead.

The problem is probably caused by the post 21, that contains an image. Scroll anchoring is unable to avoid the jump.

Context:

The website runs the master branch of the Flarum forum software. The source code is available here: https://github.com/flarum/core

Flarum makes heavy use of JavaScript, being a Single Page Application.

It might be that some Flarum bug is involved as well, but Google Chrome is able to handle the case of the URL above perfectly.

If it can help, the scrolling to a specific post is done through this function:

https://github.com/flarum/core/blob/68afdd21aee3b2032aaf89052bf3951c164df01d/js/src/forum/components/PostStream.js#L77-L98

Which calls this utility:

https://github.com/flarum/core/blob/afe06ea750cfd81767461a3884a92a26f0b0ce37/js/src/common/utils/anchorScroll.js

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Thanks, the pointers to the code are really useful!

Ryan, do you have cycles to look at this? I'm happy to poke at it for a bit if you want me to, though you definitely know our scroll anchoring implementation much better, for obvious reasons :)

Comment 2

[Ryan Hunt [:rhunt]]

This is caused by 'overflow-x: hidden' being applied on #app. This prevents us from using scroll anchoring on the page. You can verify this by setting, layout.css.scroll-anchoring.highlight=true, and seeing that we can't select a good scroll anchor.

This is the same issue as bug 1520581. Long story short, we cannot select a scroll anchor inside of a nested scrollable frame and 'overflow: hidden' creates scroll frames whether or not they are used.

Comment 3

[Ryan Hunt [:rhunt]]

Trying to organize the scroll anchoring regressions, I'm just going to dupe this to bug 1520581.