CODEWITHSUNDEEP
htmlcssaccessibilitymicrosoft-edge
Den nis
Den nis

Reputation: 23

Weird outline behavior when tabbing through links in Microsoft Edge

I am facing a weird behavior in Microsoft Edge (Version 44.17763.831.0). I have a simple ordered list containing links. When a link is focused, a simple outline applies to that link. After tabbing through the links with the tabulator on the keyboard, the outline doesn't really disappear. Sometimes it does, sometimes not.

Here is my code which causes the behavior. To Reproduce:

  1. Focus HTML Body by clicking on the grey div
  2. Navigate through the links by pressing Tab or Shift + Tab

a {
  text-decoration: none;
}

a:focus{
  outline: 2px solid green;
  outline-offset: 10px;
} 
<div style="padding: 20px; background-color: #ccc;">Click here to focus HTML Body</div>


<ul>
  <li>
    <a href="#"#>Link 1</a>
  </li>
  <li>
    <a href="#"#>Link 2</a>
  </li>
  <li>
    <a href="#"#>Link 3</a>
  </li>
  <li>
    <a href="#"#>Link 4</a>
  </li>
  <li>
    <a href="#"#>Link 5</a>
  </li>
  
</ul>

Does anybody know a workaround to that behavior? This also happens when I replace the outline with a box-shadow.

Upvotes: 0

Views: 446

Answers (2)

Yu Zhou
Yu Zhou

Reputation: 12999

I test it in Edge Legacy and reproduce the issue. The outlines seem to be overlapped in Edge Legacy and if there're some parts of the outline areas overlapped, the outlines will not disappear as suppossed. It looks like a issue with Edge Legacy browser. I'm not sure if it'll be fixed in a foreseeable period for the new Edge with Chromium is released.

You could use the following code as a workaround: use @supports (-ms-ime-align: auto) to target Edge Legacy in css and set a padding for the links so that the outlines won't be overlapped.

a {
  text-decoration: none;
}

a:focus {
  outline: 2px solid green;
  outline-offset: 10px;
}

@supports (-ms-ime-align: auto) {
  li {
    padding: 15px;
  }
}
<div style="padding: 20px; background-color: #ccc;">Click here to focus HTML Body</div>

<ul>
  <li>
    <a href="#" #>Link 1</a>
  </li>
  <li>
    <a href="#" #>Link 2</a>
  </li>
  <li>
    <a href="#" #>Link 3</a>
  </li>
  <li>
    <a href="#" #>Link 4</a>
  </li>
  <li>
    <a href="#" #>Link 5</a>
  </li>

</ul>

Upvotes: 1

Rishab Tyagi
Rishab Tyagi

Reputation: 926

Please update your Microsoft Edge.The latest version of the edge doesn't have this problem.I have tried your code on latest version of edge.

Take a look

Recorded Screen https://drive.google.com/open?id=1W332ok9vcK2ESMVO0_NDA_M9OCSDI-Im

Upvotes: 0

Related Questions