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:
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:
LogoThis content's position stretches the link's outline.
Workarounds for this bug are straightforward:
- The first option is to use
overflow: hiddenon 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.
- The alternative is to use
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.
The bug tracker link for Firefox is here: Bug 687311 — outlines are drawn outside (expanded by) outlines on descendant elements.
Exploring responsive grid systems for complex but structured layouts.
Using the flag or media pattern for locking up graphics and text for comments, alerts, and more.
Simple, modular, and layout containers.