Why Does Mobile Safari Trigger :active State during scroll?

Question

Currently testing mobile site on iOS (will get to other devices soon, so unsure if this pertains to other OS's/Browser).

How come mobile safari triggers the active state of a link during scroll?

My test page is constructed of an unordered list with a link tag inside each list item that expands to 100% width. The issue is that during a normal scroll, the :active state is triggered, revealing the background that is intended for showing during :active state only (I'm obviously omitting unnecessary styles and content from the example):

html:
<ul id="foo"><li><a href="#">Content</a></li></ul>

css:
#foo a {background:white; width:100%; height:100px;}
#foo a:active {background:red;}

Groundsill

Is your finger scrolling whilst on top of said content? – Overissue

If what you're trying to achieve is applying a colour only when the element is tapped, rather than during a scroll action, then you could use -webkit-tap-highlight-color instead of :active, but this comes with the obvious caveats of a non-standard property. – Uralite

Answer 1

You should use ontouchstart/ontouchend to add/remove a class with Javascript. Then use that class instead of :active.

Unanswerable

Is ontouchstart activated immediately upon touch, or is there a delay? – Groundsill

There's no delay. For more background see this code.google.com/mobile/articles/fast_buttons.html – Octahedrite

This might work if you really need a workaround. However, it's not exactly a clean solution, having to use extra javascript in all browsers to fix a bug in mobile Safari. And the question remains unanswered: Why does mobile Safari trigger :active during scroll? – Anh

Using ontouchstart to add a class has the same result as using :active - i.e. the style is applied when touching the element during a scroll action. – Uralite

Answer 2

You can tell if a click turns into a drag gesture or not by listening to touchstart and touchmove events and then evaluate if the touch turns into a scroll or not e.g. if you were coding in angular

let isTouchMove = false;
@HostListener('window:touchmove', ['$event'])
onTouchMove(event) {
  isTouchMove = true;
}

@HostListener('window:touchstart', ['$event'])
onTouchStart(event) {
  isTouchMove = false;
}

you can add a class, e.g. 'not-scrolling', based on the value of isTouchMove variable and use that in addition to your :active selector, like :active.not-scrolling { background:red; }.

Outrank