Firefox outline bug

A hidden element within a link can stretch the link’s focus outline to the edge of the viewport — and beyond.

The bug

In Firefox, elements intended to be hidden can impact the outlined area of their ancestors. This occurs most frequently with hidden text content for an icon or logo, where the hidden text is positioned negatively offscreen as part of an implementation to provide relevant content to screenreader users and spiders while hiding it from visual users.

An example of this technique is as follows:

.isVisuallyHidden {
    position: absolute;
    left: -10000px; /* Note the extreme negative position. */
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

For more information on this particular technique, The A11Y Project’s guide How-to: Hide Content is a useful reference.

The class works perfectly on its own, hiding content exactly as intended. However, when applied to a child of an outlined element, such as a focused link, the outline of the parent element gets extended off the edge of the viewport.

Here’s a minimal reproduction of this scenario, which you can also view on CodePen:

<div class="wrapper">
    <div class="container">
        <a class="link" href="#">
            <div class="logo">
                Logo
            </div>
            <span class="isVisuallyHidden">
                This content's position stretches the link's outline.
            </span>
        <a>
    </div>
</div>

.wrapper {
  margin: 0 auto;
  max-width: 60em;
}
 
.container {
  position: relative;
}
 
.link {
  position: absolute;
  top: 0;
  left: 0;
}
 
.link:hover,
.link:focus {
  outline: 1px dotted #000;
}
 
.isVisuallyHidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Solutions

Workarounds for this bug are straightforward:

1. The first option is to use overflow: hidden on the parent element that has an outline. This will prevent the child from stretching the border, but is not suitable if you require other children to be visible outside the bounds of the parent.
2. The alternative is to use box-shadow or border instead of outline. Only outlines are affected by this bug, so applying a visual outline via another property is still possible.

Although this may seem like a minor issue, it’s worth fixing if you encounter it. Clear and precise outlines to communicate the user’s focus position are important for usability in a variety of circumstances.

References

The bug tracker link for Firefox is here: Bug 687311 — outlines are drawn outside (expanded by) outlines on descendant elements.