Svelte: Site: interactive output results of examples do not seem to work on touch screens

[jonikorpi]

Interacting with any of the _output results_ of the examples on svelte.dev, on the front page or in the tutorial, using up-to-date iPad/iPhone on Mobile Safari fails.

It’s as if the on:click handlers aren’t firing on taps.

This page is a good example: https://svelte.dev/tutorial/updating-arrays-and-objects. Tapping the ”Add a number” button does nothing.

[Conduitry]

Sounds like a dupe of #2499

[pzagor2]

I don't think this is a dupe.
I just tried the https://svelte.dev/tutorial/updating-arrays-and-objects tutorial and the button is not working on latest Chrome as well, it's not just mobile/Safari.

[Conduitry]

Are you experiencing #2452?

[jongear]

It's worth noting that click events do not work properly on touchscreens when viewing the homepage. Specifically, the button click event doesn't fire on iOS.

https://github.com/sveltejs/svelte/issues/2499#issuecomment-486505844

[jonikorpi]

Did some debugging and found the cause: the "Result / JS output / CSS output" .tab-content elements are hidden and shown using opacity. Since the "Result" tab is the first one, it's actually sitting behind the other two tabs, which are intercepting its taps.

Now, the hidden tabs do have pointer-events: none, which should avoid this issue, but apparently not in Mobile Safari. Could be a bug or a security feature?

A quick fix would be:

1. removing opacity: 0/1 and pointer-events: none/all from .tab-content
2. replacing them with visibility: hidden/visible

[mindrones]

Hi @jonikorpi I just got to the same conclusion: this has to be fixed in the repl repo though, want to open a PR there?

[mindrones]

@jonikorpi we've applied your suggestions as a temporary fix on the site while we fix th repl itself, thanks! 👍