Chrome on Iphone - First Click on controls around Blazor Apex Charts do not work

[WimRoegiers]

Running .NET 8
Works on Chrome-Android and Safari-Iphone.
Tested with two different IPhones.

You can reproduce the bug easily by clicking on the 'Update Series' button on the demo website :
https://apexcharts.github.io/Blazor-ApexCharts/donut-charts

[joadan]

hi,

Not sure I'm missing something here but is this really a problem with Blazor-Apexcharts component?

[WimRoegiers]

It is, did some tests myself with some almost empty Blazor Server page, a default checkbox and a Blazor-ApexChart chart.
It fails.

Also this demo website https://apexcharts.github.io/Blazor-ApexCharts/donut-charts is pretty clean, if Blazor-ApexChart blocks the first interaction with the button there is a problem. I only have this on Chrome on Iphone, so other combinations of browsers and devices work. Tested with 3 recent IPhones.

[joadan]

Hi,

I added two samples:

https://apexcharts.github.io/Blazor-ApexCharts/issues/chrome1 No chart included
https://apexcharts.github.io/Blazor-ApexCharts/issues/chrome2 with a chart

Do you see any problems here? I just tried it out and I believe this is working.

[WimRoegiers]

To my surprise your examples were working fine.
I dove deeper into the problem, and was able pinpoint that this problem occurs when the control you try to click is located below the visible area of the browser. So you need to scroll down (on Chrome on IPhone).

You can probably reproduce it very easily by modifying your chrome2 example : move one of the buttons a lot down so that it doesn't become visible when loading the page. Then scroll down and click on it.

[joadan]

Hi,

I have updated both samples and it still works for me.

[WimRoegiers]

Hi Joadan,

Researched this even more and I made two examples in a fresh, default generated project (Visual Studio).

This one has the bug :
https://blazorapptestapex.azurewebsites.net/counter-bar

This one doesn't :
https://blazorapptestapex.azurewebsites.net/counter-area

The code of the two is exactly the same, except for the SeriesType.

Weird thing is, your chrome2 example also uses the SeriesType.Bar and that one works.
I reproduced the bug today on a fourth IPhone (15).