Angular 7 - Цветные подсветки отображаются в Chrome, Opera, но не в Safari

Question

Я написал приложение на Angular 7, которое отслеживает дни, когда вы выполняли определенное действие (то есть привычку), и выделяет дни, в которые вы привыкли, в годовом календаре.Даты загружаются в массив событий, который календарь читает по результатам асинхронного вызова внутреннего сервера.

Проблема в том, что по какой-то причине выделенные дни работают на MacBook Chromeи опера, но не на сафари.Что еще хуже, ни один из браузеров не выделяет даты на iPhone.

Однако, если я предварительно загружаю даты в массив событий в конструкторе компонентов, они отображаются во всех браузерах.То есть указанная ниже дата всегда отображается, поскольку она загружается в начале:

  events: any = [
    {
      start: new Date("2019-03-25"),
      end: new Date("2019-03-25"),
      title: 'dummy event 1',
      color: this.colors.redx,
      actions: this.actions
    }
  ]

Далее приведен код обратного вызова.Он помещает запись календаря в массив событий, который календарь использует для выделения дат.Подсветка работает в Chrome и Opera, но не в Safari, а также в браузерах iPhone:

    this.calendarResults$.subscribe(  calendarDisplayEntries => {  
      for (var calendarDisplayEntry of calendarDisplayEntries) {
        this.events.push(calendarDisplayEntry)   
      }
      this.myBoolean = true
    }

    );
  }

Используется следующий календарь:

https://www.npmjs.com/package/angular-calendar-year-view

Вот весь компонент(из которого взят вышеупомянутый код)

import { Component, OnInit } from '@angular/core';
import { CalendarDataService } from '../service/data/calendar-data.service';

import { Observable, of } from "rxjs";
import { map, delay } from "rxjs/operators";
import 'rxjs/add/operator/filter';
import { ActivatedRoute, Router } from '@angular/router';


export class CalendarEntry {
  constructor(
    public id: number,
    public username: string,
    public habitId: number,
    public dateCompleted: Date
  ){ 
  }
}

export class CalendarEntryDisplay {
  constructor(
    public start: Date,
    public end: Date,
    public title: string,
    public color: any,
    public actions: any
  ){ 
  }
}

export class CalendarEntryShort {
  constructor(
    public start: Date
  ){ 
  }
}

@Component({
  selector: 'app-year-calendar',
  templateUrl: './year-calendar.component.html',
  styleUrls: ['./year-calendar.component.css']
})

export class YearCalendarComponent implements OnInit {

  calendarEntriesShort : CalendarEntryShort[] = [];
  calendarEntries : CalendarEntryDisplay[] = [];
  calendarEntryDisplay:CalendarEntryDisplay;  
  calendarEntryShort:CalendarEntryShort;  
  nothingToshowText:any='Nothing to show'; // "By default" => There are no events scheduled that day. 

  colors: any = {

    red: {
      primary: '#ad2121',
      secondary: '#FAE3E3'
    },
    green: {
      primary: '#7CFC00',
      secondary: '#7CFC00'
    },
    yellow: {
      primary: '#e3bc08',
      secondary: '#FDF1BA'
    },
    redx: {
      primary: '#ff0000',
      secondary: '#ff0000'
    }
  };
  actions: any[] = [
    {
      label: '<i class="fa fa-fw fa-times"></i>',
      name: 'delete'
    },
    {
      label: '<i class="fa fa-fw fa-pencil"></i>',
      name: 'edit'
    }
  ];

  // need at least one entry
  // Note this displays regardless of browser
  events: any = [
    {
      start: new Date("2019-03-25"),
      end: new Date("2019-03-25"),
      title: 'dummy event 1',
      color: this.colors.redx,
      actions: this.actions
    }
  ]
  viewDate: Date = new Date();
  themecolor: any = '#0a5ab3'
  calendarResults$: 
Observable<CalendarEntryDisplay[]>;
  myBoolean: boolean = false
  habitId: number
  habitName: string

  constructor(
    private calendarService:CalendarDataService,
    private route: ActivatedRoute,
    private router: Router

    ) {}

  ngOnInit() {
    this.habitId = this.route.snapshot.params['id'];

    this.route.queryParams
      .filter(params => params.habitname)
      .subscribe(params => {

        this.habitName = params.habitname;
        console.log(this.habitName); 
      });

    this.callService(this.habitId)
  }


  callService(habitId){
    this.refreshCalendar(habitId)  
    this.asyncDisplayCall()
  }

  asyncDisplayCall() {

    this.calendarResults$.subscribe(  calendarDisplayEntries => {  
      for (var calendarDisplayEntry of calendarDisplayEntries) {
        this.events.push(calendarDisplayEntry)   
      }
      this.myBoolean = true
    }

    );
  }

  refreshCalendar(habitId) { 
      this.calendarResults$ = this.calendarService.retrieveAllCalendarEntriesHabitId('myname', habitId)
      .pipe(map( 
        (response: any[]) => 
        { let mappedResults = response.map(calendarEntry => 
          { return new CalendarEntryDisplay(
            new Date(calendarEntry.dateCompleted),
            new Date(calendarEntry.dateCompleted),
            'title event 1', 
            this.colors.redx, 
            this.actions); 
          }); 
          this.events.concat(mappedResults); 
          return mappedResults; 
        } 
        )); 
      } 


  eventClicked(event) {
    console.log(event);
  }
   actionClicked(event) {
    console.log('action',event.action)
    console.log('event',event.event)
  }

}

Любая помощь будет принята с благодарностью.

Редактировать: это может быть проблема WebKit.Все браузеры, не относящиеся к webkit (т.е. все, кроме Safari), могут отображать основные моменты на Mac.К сожалению, Apple требует, чтобы все браузеры iPhone использовали WebKit, поэтому мне все еще нужно найти решение.