cn.history.js.org - Scroll position not remembered when returning back

[lilydjwg]

URL: https://cn.history.js.org/part-1.html

Browser / Version: Firefox 90.0
Operating System: Linux
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: scroll position not remembered between
Steps to Reproduce:
Scroll and click a note link to navigate to the footnotes page, then go back. The scroll position is not remembered in Firefox.

View the screenshot

Browser Configuration

• gfx.webrender.all: true
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20210514215821
• channel: nightly
• hasTouchScreen: false
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[lilydjwg]

This happens on both desktop and mobile Firefoxes and makes the reading experience very bad. It works well on both desktop and mobile Chromes.

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue.

Note: The issue does not occur on Chrome.

Tested with:
Browser / Version: Firefox Nightly 91.0a1 (2021-06-02)
Operating System: Ubuntu 20.04.2

Moving to Needsdiagnosis for further investigation.

[karlcow]

There is a console error.

when I click on 12 it goes to https://cn.history.js.org/notes.html#12
then back and it goes to the top.

it calls in https://cn.history.js.org/index.js

function popstateHandler() {
  rerender(location).catch(errorHandler);
}

with location being https://cn.history.js.org/part-1.html.

then it reaches

        window.ReactDOM.render(window.React.createElement(Layout, props), document);
        if (!hash) {
            window.scrollTo(0, 0);
        } else {
            document.getElementById(hash.slice(1))?.scrollIntoView();
        }

in Gecko and Blink (Edge) hash is an empty string ""

And both go back to the top of the page. I have no differences.

note that both engines display:

_main.js:14 Uncaught TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at scrollHandler (_main.js:14)
    at y (throttle.js:2)
    at ae (throttle.js:2)
    at w (throttle.js:2)

@softvision-oana-arbuzov do you have a difference in between blink Edge and blink Chrome on desktop?

@lilydjwg agreed that's painful, but this is happening on both Edge and Firefox.

But this is working in Safari Tech Preview! Interesting. Oh… maybe a race issue.
This is happening in Safari Tech Preview if I set a breakpoint in the code and the devtools are opened.

[karlcow]

hmmm in fact if I read this correctly, the site is asking to back to the top of the page with window.scrollTo(0, 0);.
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

So somehow Firefox And Edge do the right thing.

[karlcow]

@doodlewind Is the owner of the site.
Let's see if he is experiencing the same issue.
https://github.com/doodlewind/jshistory-cn/issues

@lilydjwg Could you open an issue there?

[lilydjwg]

Sure, I'm opening.

[softvision-oana-arbuzov]

Thanks @lilydjwg .

Closing the issue as duplicate of doodlewind/jshistory-cn#33