1787417 - Firefox doesn't remember scroll postion of div element when toggling with css display

Status: NEW

(Core :: Layout, defect)

Description

[CancerGary]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Steps to reproduce:

Toggle display state of a div element by css display
Demo: https://codesandbox.io/s/scroll-top-mystery-xmx9ju

Actual results:

The scroll position is lost after setting display state back to block

Expected results:

The scroll position should been kept after setting display state back to block

Comment 1

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

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

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Reduced test-case that seems to work

This seems a bit more complicated than that because this reduced test-case does seem to work. Your example uses react and a whole lot of other stuff so it's quite hard to make sense of, would there be any chance you could create a standalone example?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

My guess is that react is removing the node from the DOM which would cause us to forget the scroll position...

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Reduced test-case that doesn't work.

Ok, this test-case does show the issue.

Comment 5

[CancerGary]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)

Created attachment 9291737 [details]
Reduced test-case that doesn't work.

Ok, this test-case does show the issue.

Yes, react don't remove the red one DOM (which is equivalent to your pure JS code)

Comment 6

[Blair Noctis]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)

Created attachment 9291737 [details]
Reduced test-case that doesn't work.

Ok, this test-case does show the issue.

Chrome 104.0.5112.101 and Edge 104.0.1293.70 confirmed on this one.