Button has to be tapped twice on iOS (svelte5)

[mrh1997]

Describe the bug

This is a very strange bug. The script below does not fire on:click when tapping "Button 1" on Safari on iOS. Only when tapping a second time the assigned alert message pops up.

The Problem does NOT occur if ANY of the following conditions is met:

• one of the divs which are enclosing "Button 2" is removed
• I move to svelte 4
• The on:click of Button 2 is removed
• Another OS is used (tested in Windows Firefox/Chrome)

Reproduction

unfortunately the problem is not reproducable on svelte-5-preview.vercel.app.
But the Problem can be easily reproduced by starting a svelte 5 project and add the following +page.svelte:

<button
	on:click={() => window.alert('TEST')}
	on:mouseenter={() => (open = !open)}
>
	Button 1
</button>

<div>
	<div>
		<div>
			<div>
				{#if open}
					<button on:click={() => {}}>Button 2</button>
				{/if}
			</div>
		</div>
	</div>
</div>

<script lang="ts">
	export let open = false;
</script>

Logs

No response

System Info

Phone OS:
    iPhone 15, iOS 17.6.1

  System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 7.57 GB / 31.75 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527

Severity

blocking an upgrade

[trueadm]

This isn't a Svelte 5 bug. This is a well known iOS bug that has been around for ages (it also affects Svelte 4, but it subtly different ways due to how Svelte 4 appends elements to the document).

The issue is because of iOS's buggy support for mouseenter. Instead use pointerenter and that should resolve your problem on iOS (or use mouseenter and setTimeout(…, 0), which was the old way of fixing the iOS issues).

[mrh1997]

Thx a lot for the hint.
(I am only wondering why this happens only when "Button 2" is encapsulated by at least 4 elements)

[mrh1997]

I translated the sample to pure-html and for some reason here the error occurs independant of the number of the surrounding

elements:

<button
	onclick="window.alert('TEST')"
	onmouseenter="show()"
>
	Button 1
</button>

<div id="insert"></div>

<script>
	function show() {
		document.getElementById("insert").innerHTML = "\t\t\t\t\t<button onclick='() => {}'>Button 2</button>\n"
	}
</script>

STRANGE...

[trueadm]

Yeah onmouseenter is bugged majorly in iOS, thankfully onpointerenter works far better.