Addressing the White Border Issue on iPhone Safari When Pressing and Holding Links

Many web developers have encountered a common visual glitch where a white border appears briefly when users press and hold links on iPhone Safari. This phenomenon can impact the aesthetic quality of your website and potentially interfere with user experience. Below, we explore this issue in detail, discuss the troubleshooting steps already undertaken, and provide recommendations to resolve it effectively.

Understanding the Issue

The white border typically manifests only on iOS devices, specifically within Safari, during long-press interactions on links. Unlike on Android or desktop browsers, this behavior is unique to iOS’s handling of touch interactions, and it often relates to Safari’s default tap and hold visual cues.

Investigated Solutions and Their Limitations

Researchers and developers have tried various CSS adjustments to eliminate this unwanted border. Here’s a summary of the most common approaches attempted:

• Disabling Tap Highlight Color

css
a {
-webkit-tap-highlight-color: transparent;
}

and

css
a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

These properties are intended to remove the default highlight color when tapping links but don’t always prevent the border during a long press.

• Suppressing Touch Callouts and WebKit-specific Properties

css
a {
-webkit-touch-callout: none;
}

Additional properties like -webkit-user-select: none; or -webkit-user-modify: none; have also been used but with varied success.

• Removing Outline and Border

css
a {
outline: none;
border: none;
}

These mitigate the visual focus indicators but sometimes don’t impact the long-press border.

• Applying CSS to Ancestor Containers

Sometimes, applying the styles to parent elements helps prevent inherited styles from causing issues.

• Using !important Declarations

To override default or conflicting styles, !important can enforce rules, though it often isn’t sufficient alone.

• Preventing Default Touch Behavior

Adding event listeners like preventDefault() and stopPropagation() on touch events helps control interaction but may interfere with native Safari gestures.

• Universal Selector Application

Applying styles globally with an asterisk selector (*) aims to