1784574 - Elastic overscroll inside div stops working after size or positioning change by devtools

Status: UNCONFIRMED

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

Description

[Bence Szalai]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:103.0) Gecko/20100101 Firefox/103.0

Steps to reproduce:

1. Make a simple page with a div including a good few <br>-s so there will be enough content to scroll. Give the div a fixed height and set it's style to include as overflow: scroll. At this point we have a div with scrollable content. On Mac when this div is scrolled the whole page shows the overscroll/rubberband effect.
2. Do either of these: change the height of the div, eg. just one px more or less, or change the positioning of this div, e.g. to position: fixed or a parent div's position.

Simple example: https://codepen.io/sbnc_eu/pen/yLKxdGe

Once loaded change any of the indicated CSS properties, and the effect would stop working.

Actual results:

Now the scrollbar still animates as if there were a overscroll/rubberband effect, but the content inside the div stops abruptly, just like it would without the overscroll/rubberband effect.

The effect will not recover, only when the whole page (or IFRAME) is reloaded.

This also means that many page that calculates and applies div heights or dynamically adjusts the positioning of content div-s would at some point loose the effect until reload.

Expected results:

Both the scrollbar and the content of the div should have the overscroll/rubberband effect.

Comment 1

[Bence Szalai]

Regarding the codepen exmple: modify the indicated css properties from the inspector, instead of the codepen editor, otherwise codepen may reload the iframe and the reproduction will fail.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Panning and Zooming' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Bence Szalai]

Small correction:

On Mac when this div is scrolled the whole page shows the overscroll/rubberband effect.

On Mac when this div is scrolled the scrollable div shows the overscroll/rubberband effect.

Comment 4

[Timothy Nikkel (:tnikkel)]

You're opening dev tools and then changing these properties? Does the problem persist after you've closed dev tools?

For me I can see the problem whenever devtools is open on a a non-root scrollable, if I close devtool it works fine. I think dev tools disables apz at least partially.

Comment 5

[Hiroyuki Ikezoe (:hiro)]

Though we haven't yet received any feedback from the reporter, I am assuming this bug happens only on devtools.

Comment 6

[Bence Szalai]

I've tried and the issue goes away when I close the inspector, so true, only happens when devtools is active. I didn't noticed that before... Still quite confusing when developing. Now I am on v106.0.3.