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

I have a skip link within my page content to allow keyboard users to skip a "quick links" section, the simplified initial code looks like this:

HTML:

<body>
  <div>A div with some content.</div>
  <div>A div with some content.</div>
  <div >
    <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;}

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 these browsers, it seems to center the focussed element in the viewport, which is ideal.

The issue seems to be just with Firefox. 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!

Edit: Here's a JSFiddle that replicates the issue: https://jsfiddle.net/ptdwkzgr/

The unexpected behavior seems to only be happening in Firefox. I would like to know if it's possible to get Firefox to behave in the expected manner (the behavior I'm seeing in Chrome, Safari, and Edge).

CodePudding user response：

If you can accommodate a little bit of JavaScript then scrollIntoView API can be used:
demo on jsfiddle

document.addEventListener('DOMContentLoaded', init);

function init() {
  let lnk = document.querySelector('.skip a');
  lnk.addEventListener('focus', () => lnk.scrollIntoView({block: "center"}) );
}

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}

.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;
}

#quick-links-section-con {
  display: block;
  overflow: hidden;
  width: 100%;
  background-color: #7A8C99;
}

.quick-links-section {
  float: left;
  width: 33.33%;
}

.content {
  height: 100vh;
  word-spacing: 50px;
}

<div >
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In finibus ligula in congue laoreet. In mi odio, efficitur quis lectus id, euismod fermentum arcu. Proin vel ipsum quis quam tincidunt maximus. Curabitur quis convallis risus. Nunc vel eleifend
    mi. Mauris facilisis ligula eget pretium mollis. Maecenas lacus mi, iaculis at efficitur vel, tempor sed neque.
  </p>
</div>

<div >
  <a href="#destination">Skip quick links navigation</a>
</div>

<div id="quick-links-section-con">
  <div >
    <p>Lorem</p>
    <ul>
      <a href="#">
        <li>Ipsum</li>
      </a>
      <a href="#">
        <li>Dolor</li>
      </a>
      <a href="#">
        <li>Sit</li>
      </a>
      <a href="#">
        <li>Amet</li>
      </a>
      <a href="#">
        <li>Consectetur</li>
      </a>
      <a href="#">
        <li>Adipiscing</li>
      </a>
    </ul>
  </div>
  <div >
    <p>Elit</p>
    <ul>
      <a href="#">
        <li>Ipsum</li>
      </a>
      <a href="#">
        <li>Dolor</li>
      </a>
      <a href="#">
        <li>Sit</li>
      </a>
      <a href="#">
        <li>Amet</li>
      </a>
      <a href="#">
        <li>Consectetur</li>
      </a>
      <a href="#">
        <li>Adipiscing</li>
      </a>
    </ul>
  </div>
  <div >
    <p>Finibus</p>
    <ul>
      <a href="#">
        <li>Ipsum</li>
      </a>
      <a href="#">
        <li>Dolor</li>
      </a>
      <a href="#">
        <li>Sit</li>
      </a>
      <a href="#">
        <li>Amet</li>
      </a>
      <a href="#">
        <li>Consectetur</li>
      </a>
      <a href="#">
        <li>Adipiscing</li>
      </a>
    </ul>
  </div>
</div>
<div id="destination" class='content'>
  <p>
    Morbi consectetur massa quis metus tempor accumsan. Phasellus gravida, ante at sodales molestie, dolor sem auctor nisi, in tempus sapien felis id nisi. Maecenas dapibus suscipit metus vel euismod. In sed erat sodales felis blandit varius non eget ante.
   
  </p>

</div>
<div>A div with some content.</div>
<div>A div with some content.</div>