I noticed that my buttons are not working on the IOS devices, it seems that the click event is not called. Everything is working perfectly on the windows, android, Linux. Since I don't have access to any mac I was trying to debug it on the browserStack, I am getting this error every time I am trying to click the button:
ERROR TypeError: undefined is not an object (evaluating 't.path[4]')
I might be completely wrong, but I think that it might be related with the SVG's rect that is inside of the button (I am using it as a progress bar), on the rect load event I am accessing it to find its length. Maby it is called "too early" so it cannot access the rect correctly. Previously I was using the ngAfterViewInit
with the setTimeout
inside to manage the same effect.
<rect
#rect
width="96"
height="96"
rx="8"
fill="none"
stroke-width="4"
[ngStyle]="{
'stroke-dasharray': strokeDasharray,
'stroke-dashoffset': strokeDashoffset
}"
(load)="getRectLength()"
/>
getRectLength() {
this.length = this.rect.nativeElement.getTotalLength();
this.strokeDasharray = this.length;
}
Code:
https://github.com/mateuszkornecki/chess-clock/tree/master/src
Live demo:
https://mateuszkornecki.github.io/chess-clock/settings
Steps to reproduce:
Simply click on one of the big buttons with the counter, after a click it should start counting.
I tested it on several IOS devices, it was not working on everyone regardless of the IOS version. That's my first project made with Angular so there is a chance that I've made a simple mistake. Any help will be appreciated!
I have found the source of the problem. I was trying to use the event.path
array on the click event. It looks that it is not available on the Safari. I fixed the problem by using the event.composedPath
instead of the event.path
References: https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.