1797307 - when scrolling down on thepennyhoarder.com pages, it keeps jumping back up to the beginning.

Status: UNCONFIRMED

(Core :: Layout: Positioned, defect)

Description

[[e-mail]]

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

Steps to reproduce:

I was scrolling down the page while reading.
https://www.thepennyhoarder.com/save-money/quality-cozy-slippers/?aff_id=86&aff_sub3=20221025&utm_medium=email&utm_source=daily&utm_campaign=20221025&cid=631fb0134c5441ea5102452f

Actual results:

it scrolls for a short while then jumps back up to the top of the page.

Expected results:

It should have continued to scroll as I was directing it to.
(I did check on Safari and Chrome and the problem does not happen.)
This has been consistently happening for many months.

Comment 1

[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 2

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

The severity field is not set for this bug.
:botond, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 3

[Botond Ballo [:botond]]

The page is definitely behaving oddly. It seems like, as you scroll, something is adding a blank region at the top of the page, pushing the article content down (creating the appearance of "jumping back up"). If you scroll back up after such an apparent jump, you can see the blank region (which then disappears if you scroll all the way to the top).

Comment 4

[Botond Ballo [:botond]]

This seems like a Layout bug to me, based on the following observations:

• While the page has wheel and scroll listeners registered, the issue reproduces even with these disabled (unchecked in devtools), i.e. it's not the case that the page is running some JS in response to scrolling and that's modifying the page structure.

• The "blank space" that appears seems to reflect the <div class="container flex-container"> element on the page increasing its height as you scroll. For me, the initial height is 8027px, but as you scroll it can increase significantly, to > 10000px or even > 12000px in some cases. The difference is the height of the "blank space".

  • I can't spot anything in the DOM or styles that would account for this extra height, e.g. a new DOM element being created and added, or a relevant property like height changing value.
  • The height of the descendant that seems to determine the initial height, <div class="col-xs-12 single-post">, remains 8027px even as you scroll.
  • Toggling various properties of the <div class="container flex-container"> element in Inspector (for example, margin-right: auto, from the .container rule) and back, causes its height to jump back to the expected / correct value.

• One particularly interesting observation: the first child element of the <div class="container flex-container"> element is position:sticky. If I set this element to display: none, the bug does not occur.

These symptoms make me believe that the extra height is some sort of temporary incorrect value that disappears after re-triggering certain layout-related computations, and (based on the last observation) that the issue has something to do with computations related to the position:sticky element.

Comment 5

[Botond Ballo [:botond]]

Note on reproducing: the issue is easiest to reproduce the first time you scroll after freshly loading the page in a new tab. Once the bug has been triggered, and you've done something to make the blank space go away, the bug sometimes doesn't trigger again, even after a page reload.

Comment 6

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

The severity field is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit auto_nag documentation.