Funkcionalnosć toś togo sedła se pśez wótwardowańske źěła wobgranicujo, kótarež maju wašo dožywjenje pólěpšyś. Jolic nastawk waš problem njerozwězujo a cośo pšašanje stajiś, wobrośćo se na našo zgromoźeństwo pomocy, kótarež na to caka, wam na @FirefoxSupport na Twitter a /r/firefox na Reddit pomagaś.

Pomoc pśepytaś

Glědajśo se wobšudy pomocy. Njenapominajomy was nigda, telefonowy numer zawołaś, SMS pósłaś abo wósobinske informacije pśeraźiś. Pšosym dajśo suspektnu aktiwitu z pomocu nastajenja „Znjewužywanje k wěsći daś“ k wěsći.

Dalšne informacije

Skip link within page content not in viewport on focus in Firefox

more options

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/

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/ https://jsfiddle.net/ptdwkzgr/]

Wót mjzeroeffect změnjony

Wšykne wótegrona (3)

more options

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.

more options

@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.

Wót mjzeroeffect změnjony

more options

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.