[Bug]: Client Component onClick events fail to fire on iOS Safari (Next.js 16.2.1)

Link to the code that reproduces this issue

https://github.com/KamingLo/nextjs-boilerplate

To Reproduce

Create a fresh Next.js project using npx [email protected].

Create a simple counter Client Component in the main page:

TypeScript

'use client';

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Deploy or run the development server.

Open the application using Safari on an iPhone.

Tap the "Increment" button. The count remains 0 and does not update.

Current vs. Expected behavior

In Next.js version 16.2.1, basic interactive elements (like a button with an onClick handler) inside a Client Component do not register touch events on iOS Safari. The component renders visually, but the state fails to update upon tapping.

This issue severely impacts mobile-first development, as the exact same code works perfectly on desktop browsers (like Chrome on Windows) and functions flawlessly when downgraded to Next.js 15.

Tapping a button with an attached onClick event in a Client Component should successfully trigger the state update and reflect the new state in the UI on iOS Safari, just as it does on desktop environments.

Provide environment information

OS: iOS (Tested on iPhone)
Browser: Safari
Next.js Version: 16.2.1
Node.js Version: 24.1.4

Which area(s) are affected? (Select all that apply)

Loading UI and Streaming

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Downgrading the project to Next.js 16.1.6 immediately resolves the issue, and the button becomes fully responsive on iOS Safari. This suggests a potential issue with how hydration or client-side rendering is handled specifically for WebKit mobile environments in version 16.2.1