iOS 13 Safari PWA div clicks only fire erratically

[tn-5]

When styling a div element as a clickable button in iOS and subsequently installing it as a PWA, the element only erratically responds to click events.

Tested on: iOS 13.4.1

Reproduce

Standard blazorwasm template (with pwa option), add following code to counter.razor:

<div class="bg-primary" @onclick="IncrementCount" style="height:40px;">
    <p>Button 1</p>            
</div>
<br>
<div class="bg-primary" @onclick="IncrementCount" style="height:40px;cursor: pointer;">
    <p>Button 2</p>            
</div>
<br>
<button class="bg-primary" @onclick="IncrementCount" style="height:40px;cursor: pointer;">
    <p>Button 3</p>            
</button>

Results (run from browser)

Clicking on any of the 3 elements result in the counter being in incremented

Results (when installed as a PWA - add to home screen on iPhone)

Only clicking #3 (the button) works reliably, the first two sometimes respond erratically and sometimes not at all.

[javiercn]

@tn-5 thanks for contacting us.

Can you provide us with a minimal repro project that demonstrates the issue so that we can help you out?

[tn-5]

To reproduce

1. dotnet new blazorwasm -p
2. Edit Counter.razor in Pages folder, paste code from initial report just before the @code line

To test this it must be accessible from an iPhone. So either deploy it somewhere or just run it locally, but listen on a port accessible by the iPhone, for example:

3. dotnet run --urls=http://xxx.xxx.xxx.xxx:5005

where xxx.xxx.xxx.xxx is the PC IP address accessible from the iPhone (on the same wifi network for example).

4. Open Safari on the test iPhone, enter the url above (5005 is chosen as an arbitrary test port in this case)

5. Navigate to the counter page (from menu)

6. Click on "Button 1", 2 and 3 - observe that the counter increments (correctly) each time.

7. Install the same app as a PWA. With the page open on the iPhone click on the share icon, select "Add to home screen". An icon for the app is added to the home screen.

8. Open the app from the home screen icon. Repeat the test - navigate to the counter page and click the buttons.

9. Observe that only the original "Click me" button and "Button 3" responds. Buttons 1 and 2 do not work, or only erratically.

[SteveSandersonMS]

@tn-5 Sorry for the inconvenience. However, as far as I'm aware, this is not really a Blazor issue, but is rather a quirk of how Safari behaves on iOS in general.

There are many, many other reports of people wondering about this when using other frameworks too (example, or for others, search the web for ios safari onclick). There are also many different workarounds that people propose, such as setting certain <meta> tags on the page, registering top-level onclick or ontouchstart events, and more. I'd recommend you look into the various workarounds that people propose and find one you think is suitable for your app.

In general, Blazor isn't a polyfill library and doesn't try to normalize browser quirks such as this. However if you think there is a specific thing Blazor should do to make this specific thing better we'd definitely be open to considering it.