Skip to content

Fix scroll position restoration #569

Open
@chasenlehara

Description

@chasenlehara

Scroll position restoration is buggy in different browsers.

Here’s the code. I think most of it is unnecessary. https://github.com/canjs/bit-docs-html-canjs/blob/master/static/canjs.js#L334-L362

Below are a few common cases that we should get right. It’d be nice to have tests around these, similar to what we have for the sidebar:

QUnit.test('Sidebar scrolls to selected items', function(assert) {
var done = assert.async(1);
var timeout = 20000;
var timeoutID = setTimeout(function() {
assert.notOk(true, 'Test took longer than ' + timeout + 'ms; test timed out.');
}, timeout);
// Open the demo page in an iframe
FuncUnit.open('../sidebar/demo.html', function() {
// Set the height & width of FuncUnit’s iframe
FuncUnit.frame.height = 200;
FuncUnit.frame.width = 600;
// Select the can-ajax page
FuncUnit('.go-to-can-ajax').click();
// Check to make sure the element is visible
FuncUnit('[selected-in-sidebar]').wait(function() {
var element = this[0];
if (!element) {
return false;
}
var rect = element.getBoundingClientRect();
return utils.rectIntersectsWithWindow(rect, FuncUnit.win);
}, function() {
clearTimeout(timeoutID);
assert.ok(true, 'did scroll to selected element');
done();
});
});
});

1. Scroll down and refresh the page

It’s completely broken in Firefox:

firefox scroll and refresh

2. Click on a specific section

When the user clicks on an in-page navigation link, the header for that section should be visible under the sticky header.

3. Refresh after going to a specific section

It lands on the wrong position in multiple browsers; here’s Firefox:

firefox refresh with id

4. Refresh after going to a specific section and scrolling

After refreshing, the user should end up where they scrolled, not back at the old section. I think this is broken in all browsers.

firefox refresh with id after scrolling

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions