Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hover state for headers' permalinks is weird #843

Closed
jimporter opened this issue Feb 26, 2016 · 16 comments
Closed

Hover state for headers' permalinks is weird #843

jimporter opened this issue Feb 26, 2016 · 16 comments
Labels

Comments

@jimporter
Copy link
Contributor

@jimporter jimporter commented Feb 26, 2016

Try going to http://www.mkdocs.org/ and put your mouse to the right of "Host anywhere". You'd expect to see the permalink for that heading, but instead, the permalink for "Great themes available" shows up. This can be pretty annoying, since it makes it harder to click on the permalink; if you go a pixel too far to the right, you have to move your mouse back over the text itself, and then back again to the permalink.

As far as I can tell, this is because of the following code: https://github.com/mkdocs/mkdocs/blob/master/mkdocs/themes/mkdocs/css/base.css#L43-L49. I gather that it's there to work around the existence of the header so that anchor links go to the right spot. I'd argue that the old Javascript way was better, unless someone can figure out a way to trick CSS into handling the hover state better.

@waylan
Copy link
Member

@waylan waylan commented Feb 26, 2016

I'm not seeing this behavior in Chrome on Linux. Everything looks fine to me. What browser are you using?

@jimporter
Copy link
Contributor Author

@jimporter jimporter commented Feb 26, 2016

I tried Firefox (nightly and release), Chromium, and IE. You might need to maximize the browser window to ensure that the text under "Host anywhere" is all on one line. Here's a screenshot from Chromium:

untitled

@waylan
Copy link
Member

@waylan waylan commented Feb 26, 2016

I see the incorrect behavior you are describing in your screenshot, but am not able to reproduce it locally.

@d0ugal
Copy link
Member

@d0ugal d0ugal commented Feb 26, 2016

Yeah, confirmed on Chrome 48 (on Fedora). I can see this bug. Just move your mouse around a bit and it'll sometimes show the header link when you are not over any header at all (and usually it then shows the header below where you are).

@jimporter
Copy link
Contributor Author

@jimporter jimporter commented Feb 26, 2016

Right. If you inspect the element, you can see why:

untitled-1

It's actually much larger than just the line of text, since the ::before pseudo-element adds to the size in order to make the element's top be closer to the beginning of the page. That helps ensure that navigating to the anchor for that element doesn't hide the heading behind the navbar at the top. I'm not sure there's a CSS-only way to do this without causing this issue. You'd either need to use Javascript or modify the HTML.

d0ugal added a commit to d0ugal/mkdocs that referenced this issue Feb 26, 2016
@d0ugal d0ugal added the Bug label Feb 26, 2016
@d0ugal
Copy link
Member

@d0ugal d0ugal commented Feb 26, 2016

Cool, yeah, I spotted that too. I think I've fixed it in #844.

@d0ugal
Copy link
Member

@d0ugal d0ugal commented Feb 26, 2016

Meanwhile, if you use extra_css and add the following, it should fix it for you (and let you confirm my fix which would be super helpful! 🌟).

h1[id]:before, h2[id]:before, h3[id]:before, h4[id]:before, h5[id]:before, h6[id]:before {
    content: "";
    display: block;
    pointer-events: none;
}
@jimporter
Copy link
Contributor Author

@jimporter jimporter commented Feb 26, 2016

Unfortunately, I think that patch will cause the header itself to be hidden by the navbar at the top (which is why that padding/negative-margin trick was there in the first place). I delved into the history, and it used to have a JS implementation: #407.

@d0ugal
Copy link
Member

@d0ugal d0ugal commented Feb 26, 2016

aha, that's what that height hack was for! We should really use comments.

@jimporter
Copy link
Contributor Author

@jimporter jimporter commented Feb 26, 2016

Yeah, any time there's a negative margin in CSS, there should probably be a comment. :)

@d0ugal
Copy link
Member

@d0ugal d0ugal commented Feb 26, 2016

Well, that's a shame I was feeling clever for a moment. I'll finish my coffee and think about it for a bit.

@jimporter
Copy link
Contributor Author

@jimporter jimporter commented Feb 26, 2016

A partial fix would be to change the CSS to:

:target::before {
    content: "";
    display: block;
    margin-top: -75px;
    height: 75px;
    pointer-events: none;
}

The above will ensure that all the headers, except the one referred to in the URL's hash, will work fine. You could probably be really tricky and turn the selector into something like body:not(.scrolled) :target::before, and then have JS set .scrolled on the body in an onscroll event handler. That's kind of weird, but arguably less weird than the original JS code.

The real solution is for CSS to have some sort of anchor-offset attribute. :)

@d0ugal
Copy link
Member

@d0ugal d0ugal commented Feb 26, 2016

Oh, that is neat. I didn't know you could do :target::before - that is an improvement at least until somebody has time to figure out a better fix.

@jimporter
Copy link
Contributor Author

@jimporter jimporter commented Feb 26, 2016

Ok, I think I have a patch for this. It's fairly bizarre, so I need to clean it up and add some comments. Then I'll file a PR.

@jimporter
Copy link
Contributor Author

@jimporter jimporter commented Feb 26, 2016

@d0ugal Ok, the PR is up. I added a comment that hopefully explains all the weird magic I performed. I can also add vendor-specific CSS prefixes as appropriate if you think they're necessary. Here's a compatibility chart: https://developer.mozilla.org/en-US/docs/Web/CSS/animation#Browser_compatibility

jimporter pushed a commit to jimporter/mkdocs that referenced this issue Feb 27, 2016
jimporter pushed a commit to jimporter/mkdocs that referenced this issue Feb 27, 2016
@d0ugal d0ugal closed this in #846 Mar 3, 2016
@ppKrauss
Copy link

@ppKrauss ppKrauss commented Apr 16, 2017

Navbar is not a custom feature? How to maintain a custom CSS-code (ex. change navbar backgroundcolor) in a ugly and mixed-bootstrap CSS code?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

4 participants