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;}

Answer 1

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