---
title: 'iOS Safari & :active'
excerpt: 'Why tf :active state still needs an ancient hack to work properly on iOS Safari?'
summary: "iOS Safari ignores CSS :active on tap unless the element (or html) has an empty ontouchstart handler - a decade-old fix that's still needed."
date: 2024-10-07
categories: ios, web
featureImage: '/images/safari-and-active.webp'

prev:
  text: 'JS: Async/Await'
  link: '/blog/js-async-await'

next:
  text: 'The WordPress Drama'
  link: '/blog/the-wp-drama'
---

All I wanted was for a `div` to visually respond when tapped - simple, right? But nope, `Safari on iOS` had other plans.
The fix? Add `ontouchstart=""` to your component or, even worse, directly to your `html` element.

<div style="margin: 2rem 0;">
    <BlogPostImage src="https://media1.tenor.com/m/sHsxUpuckYYAAAAd/captain-america-sigh.gif" alt="Captain America sighing in frustration" />
</div>

That’s right, a completely _**empty**_ inline JavaScript event just to get Safari to acknowledge a basic CSS behavior.
It's almost as if someone at Apple thought -`"Ohh no, no, no, why make things simpler when we can force developers to add
pointless hacks?"`

> And what's with the `-webkit-*` vendor prefix fuckery!?

And guess where I unearthed this solution? On a **14-year-old** Stack Overflow thread 🙂.\
Yes, a fix from over **a decade ago** is still what I had to rely on today.

Meanwhile, every other modern browser is perfectly content letting `:active` do its job.\
But Safari? It prefers to keep things... nostalgic. Guess it's missing `IE`.