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.

[tn-5]

I'm aware that Safari mobile (like all browsers) have quirks that you may need to work around. The thing that concerned me in this case it not that it does not work on Safari, but that there is a different between Safari mobile (as a website) and Safari mobile (as a PWA launched from the home screen).

I suppose I was worried that there might be something about the way Blazor specifically registers the onclick events in PWA mode (or how the startup is done) that may affect this.

In any case the workaround for this specific issue is to simply use button elements for clickable items.

[tn-5]

I've done further testing and I'm thinking it may be a Blazor specific issue.
If you replace @onclick="IncrementCount" in the repo above with onclick="alert('clicked')" the event fires every time.
It is only the processing of the event by Blazor that does not seem to work.

[SteveSandersonMS]

Blazor uses event delegation - that’s why it’s different and affects all event delegation systems.

[ghost]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.