Skip link within page content not in viewport on focus in Firefox
I have a skip link within my page content to allow keyboard users to skip a "quick links" section.
The content above the .skip div is long enough that the .skip div, the quick links div, and the #destination div are all below the bottom of the viewport when the page first loads.
The behavior that I would expect, and that I am seeing on Chrome, Safari, and Edge, is that when the anchor link inside the .skip div receives focus (in this case, when a user tabs to it), the entire link is visible in the viewport. In fact, in the non-Firefox browsers, it seems to center the focussed element in the viewport, which is ideal.
The issue seems to be just with Firefox (both on a Mac and a PC). The behavior I'm seeing in Firefox is that when the anchor link inside the .skip div receives focus, the top of the .skip div is at the bottom of the viewport, i.e. just off screen. If I scroll down the page, I can see that the .skip div and the anchor link inside it are visible and the anchor link has focus.
Any suggestions on how to replicate in Firefox the behavior seen on the other browsers? Thanks!
Here's a JSFiddle that replicates the issue: https://jsfiddle.net/ptdwkzgr/
Bewerkt door mjzeroeffect op
Alle antwoorden (3)
If I inject the following into a page with basic links --
a {display: inline-block; min-height:72px;}
-- then Firefox does show nearly the entire 72px height of the link, but at the bottom of the viewport. If there is a trick for this, perhaps you can find it on StackOverflow or a developer's blog.
@jscher2000 - Thanks for the suggestion, but it didn't work for me. If it helps to clarify, the simplified initial code looks like this:
HTML: <body> < div >A div with some content.< /div > < div >A div with some content.< /div > < div class="skip" > <a href="#destination">Skip quick links navigation</a> < /div > < div >Quick links navigation.< /div > < div id="destination" >A div with some content.< /div > < div >A div with some content.< /div > < div >A div with some content.< /div > </body>
CSS: .skip a {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;} .skip a:focus {position: static; width: auto; height: auto; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 4px solid #0067a5; color: #0067a5; display: block; font-size: 1.75em; line-height: 1.1; padding: 1em; text-align: center;}
I tried editing the CSS to add display: inline-block; min-height: 72px;, first to .skip a and then to .skip a:focus. Neither worked, the .skip div with focus was still just offscreen in both cases.
Bewerkt door mjzeroeffect op
Yes, I'm not surprised because I couldn't figure out a fix. I don't know how absolute positioning and floats affect the way Firefox calculates the vertical scroll position of the link, and you also have padding.