search

apexcharts / Blazor-ApexCharts

A blazor wrapper for ApexCharts.js
https://apexcharts.github.io/Blazor-ApexCharts
MIT License
774 stars 90 forks source link

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

Open WimRoegiers opened 6 months ago

WimRoegiers commented 6 months ago

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 commented 5 months ago

hi,

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

WimRoegiers commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

Hi,

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

WimRoegiers commented 5 months ago

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).