📱 Nuxt iOS WebKit :active CSS Pseudo

This simple, lightweight Nuxt module ⚙️ resolves a common issue in iOS WebKit browsers 📱: the :active CSS pseudo-class doesn’t function as expected without an explicit touchstart event ✋.

• ⚡ Effortless Fix: A straightforward solution for the :active issue on iOS WebKit that just works.
• 📦 Minimal size: It's lightweight and has no extra dependencies to worry about
• 🔧 Easy Integration: Super simple to add to any existing project.

🛠️ Quick Setup

The fastest way to get started — Nuxt will install and configure the module for you automatically:

npx nuxi module add @vincentdevreede/nuxt-ios-webkit-active-css-pseudo

That’s it! You’re ready to go 🚀

⚡ Manual Installation

1. Install the module

# npm
npm install @vincentdevreede/nuxt-ios-webkit-active-css-pseudo

# yarn
yarn add @vincentdevreede/nuxt-ios-webkit-active-css-pseudo

# pnpm
pnpm add @vincentdevreede/nuxt-ios-webkit-active-css-pseudo

2. Add to modules in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@vincentdevreede/nuxt-ios-webkit-active-css-pseudo'
  ]
});

🌍 JavaScript?

Not using Nuxt, just good ol' HTML/CSS/JavaScript. Add this code to your JavaScript:

document.addEventListener('touchstart', () => {}, { passive: true });

🤝 Contributing & Issues

Contributions are welcome! If you’ve got ideas or want to help out, feel free to open an issue or submit a pull request. If you run into any problems, let me know by reporting them here.