I have a position fixed header. And then I have some content; some divs with some text.
If I:
- Go to the startpage of my website
- Scroll down
- Click on any link
Then on the next page the page has been auto scrolled by roughly the same amount as the address bar!?
I don't get why it is auto scrolling the second page - that's got nothing to do with the first one?!
And here's one thing that's even more interesting.
If I do the exact same steps as above EXCEPT that BEFORE clicking any link I scroll up again (just a little bit) then the next page will load the layout properly with no auto scrolling / jump!?
Any clues?
Safari (iOS) doesn't have this issue.
I've searched the chromium database and google but I have only found other types of addressbar/scrolling problems. Surely this one is a known one?!
Update:
Fastest and easiest way to reproduce this is to setup two .html pages with the exact same content with each page linking to the other by using a simple anchor element. The content of both pages should be the fixed navbar and footer template from bootstrap.com (http://getbootstrap.com/examples/sticky-footer-navbar/). Once you have that setup do the following:
- Load page1
- Scroll page1
- Tap on link to page2
- Scroll page2
- Tap on link to page1
- Repeat until the scroll position gets offset
This happens intermittently. I cannot reproduce it on command. Try scrolling up slightly so that you can barely see the omnibox reappear and the touchclick the link.
It looks like as the pixel offset is equal to the height of the omnibox.
2 Answers
Answers 1
Have a look at the address (query-string) in the address-bar (or "href" address of links).
If there is a # (document-fragment target) then the browser will look for an element matching the id (text after the #).
If there is a # in the address followed by no-text and there is an element on the page with id="" (blank id) --or if there are duplicate element id's then it may cause undesirable issues as the browser tries to figure out where to scroll.
Also have a look at any "server includes", especially for JavaScript and CSS that may interfere and disable/comment-out these temporarily to debug the issue as a "process-of-elimination" tactic.
If none of the above works, then the problem may be either "extension/plugin" related, or device-specific. If you have any "helper" tools as browser extensions it may interfere. Try testing this on another standards-compliant browser (like Chromium, Firefox, Safari, Opera, etc) without extra extension.
Finally, make sure it's not device-specific; test this on other devices or regular desktop/laptop/smart-phone too see if the problem persists; if not then the issue may be with the device/software you are using to test.
Answers 2
Check that your scroll anchoring is disabled. For Google Chrom type in the url "chrome://flags/#enable-scroll-anchoring"
Make sure it is not turned on if you do not want your browser to anchor to scroll location.
0 comments:
Post a Comment