1480261 - scrollIntoView({ block: 'center' }) sometimes scrolls an unrelated container

Status: RESOLVED WORKSFORME

(Core :: Panning and Zooming, defect, P3)

Description

[Brian Birtles (:birtles)]

Attachment: Test case

I'm having a really hard time creating a reliable reduced test case but I'm seeing this bug occur fairly often in an app I'm creating when running on a low-end Windows machine and on Fennec.

This test case sometimes produces a situation where it seems like the outer scroll frame gets scrolled leaving part of the page inaccessible.

There seems to be some race between the transform animation and scroll calculations.

The app where this is occurring is https://dev.10sai.app/cards/new but that page will likely change over time. I _think_ the attached test case has all the right ingredients to reproduce but I'm not entirely sure.

I've never once been able to reproduce this on a higher-end Linux machine. Somedays it works fine on Fennec, and some days it is 100% reproducible on Fennec. On my lower-end Windows machine it happens about 30~40% of the time (but again, some days not at all, some days all the time). When it does happen, however, it makes the app entirely unusable so it's pretty severe.

Comment 1

[Brian Birtles (:birtles)]

Attachment: Test case

Add viewport scaling

Comment 2

[Brian Birtles (:birtles)]

Attachment: Test case

Make height a little smaller

Comment 3

[Brian Birtles (:birtles)]

Yeah, that test case doesn't reproduce for me now on Fennec. But it does behave completely differently to desktop (not scrolling at all) so maybe it's related anyway.

To be clear, when it has reproduced, you'd find one of the top boxes cut-off and be unable to scroll to it.

Comment 4

[Brian Birtles (:birtles)]

I tried digging into this a little further. In the actual app, it seems like it is triggered by the background screen being scrollable (hence you won't be able to reproduce unless you create enough content for it to become scrollable).

Furthermore, I've noticed it has nothing to do with animation. I can disable the animation and still get the odd result.

I think all that is happening is that the default behavior for scrollIntoView is block: 'center', and it is being a bit too eager to meet that demand, so it is scrolling a parent container in a manner it probably shouldn't (the child is abspos so there's no kind of general scrolling that would produce the given result).

This might be invalid but it would be nice to get a reduced test case so we can check that.

Comment 5

[Kartikaya Gupta (email:[e-mail])]

I can repro different behaviour on FF desktop vs android. FF desktop behaves the same as Chrome, so I'm assuming it's Fennec's behaviour that needs fixing.

Comment 6

[Botond Ballo [:botond]]

A lot of Fennec vs. desktop scrolling differences that have come up recently have been due to containerful vs. containerless scrolling. We have plans to get rid of containerful scrolling (bug 1459312), once we do that it's worth re-testing bugs like these to see if it fixes the issue.

Comment 7

[Botond Ballo [:botond]]

Hey Brian, have you seen this recently (in 68 nightly or 67 beta)?

Comment 8

[Brian Birtles (:birtles)]

No, but I changed the app quite some time ago to use { block: 'nearest' } and from memory that was less problematic.

Comment 9

[Botond Ballo [:botond]]

Thanks. I think it makes sense to close this as "WORKSFORME" until someone runs into it again.