Exploring old Firefox bugs

Stretched outlines

The bug

In Firefox, an offset element can impact the outlined area of its ancestors. This occurs most frequently with hidden text content techniques used for icons or logos, where the visually-hidden text is positioned offscreen with a negative offset. The purpose of this implementation to provide relevant content to screenreader users and crawlers, while hiding it visually.

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 gets extended off the edge of the viewport in Firefox.

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, a clear visual indicator to communicate the focused element is important for usability, and can be disrupted by this issue.

References

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