（点击）事件仅适用于 IOS 设备 - angular 10 应用程序

Question

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!

Answer 1

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