Sidebar toggle resets page position?

[nicholaelaw]

Hi there, I've been having this problem for a long time, and I just want to hear what you guys think went wrong.

Lanyon's sidebar toggle should not affect current page position, right? I mean when you click the sidebar toggle button, the sidebar pops out but the content you are viewing should stay where they are. It worked when I first downloaded and built on the vanilla Lanyon template.

However after I added my own customizations, clicking the toggle button would send current page all the way to the top. And I have not touched anything inside poole.css, lanyon.css or the script in default.html. I tried disabling all the custom CSS and JavaScript I added, but it didn't work.

I don't want to go back to the beginning and rebuild from ground up. I'm not asking anyone to fix it for me. I just want to hear some suggestions as to where to look. I couldn't find anything suspicious, but then again I'm very new to HTML-CSS-JS.

Any thought would be appreciated.

[lehnerpat]

I am also seeing this issue.

However, it only happens in Firefox (40.0.3) and Chrome (45.0.2454.93) for me. It works fine in Safari 8.0.8 (10600.8.9). This is all on OS X 10.10.5.

@nicholaelaw, what browser(s) and OS(s) have you tried this in?

[lehnerpat]

I also just noticed that the Lanyon demo page at http://lanyon.getpoole.com/ works fine (the Menu Toggle does not scroll the page to the top) in Firefox.

However, that page seems to use a different configuration from the default in the repo, since the sidebar also does not close upon clicking anywhere in the document.

[lehnerpat]

By taking the CSS from the working GitHub Pages site linked above and diffing it against the current master branch, I just applied the older CSS on a hunk-by-hunk basis.

And I got lucky, one of the first hunks turned out to be the culprit.

The current master commit f107e1bdbb has the following rules in the file public/css/lanyon.css on line 204:

/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
.sidebar-checkbox {
  position: absolute;
  opacity: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

Whereas the older revision that is use on gh-pages (55e0be4f42dc) has the following shorter rule, also on line 204:

/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
.sidebar-checkbox {
  display: none;
}

Simply replacing the newer rules with the single old one fixes the issue for me in Firefox.

@nicholaelaw, would be cool if you could test this and report back.

[nicholaelaw]

Sorry somehow I missed the issue update notification. I tested on Chrome 45 (OS X), and lastest version of Android Chrome. I'll definitely try your solution and report back. Thanks for the work.

[nicholaelaw]

@nevik Yes I can confirm changing the rule at line 204 fixed the issue in Chrome. Right now I'm too lazy to fire up Windows to test on IE, but I'll do it later today. Thanks for the fix and I hope the devs see this.

[erichiller]

Had the same issue - I'm running Chrome Version 45.0.2454.101 m (64-bit). Dropping back to:

/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
.sidebar-checkbox {
  display: none;
}

Fixed it for me as well.

[quicknir]

This also fixes an issue for me, wherein if you click the sidebar button and the sidebar appears, after clicking on the main page to dismiss the sidebar (rather than clicking on the button again), the button stays in its "on" coloration.

[Tom003]

I'm still getting this issue on ms edge (v 121.0.2277.112).