Angular 7-在Chrome，Opera而非Safari上显示彩色高光

Question

我已经在Angular 7中编写了一个应用程序，该应用程序可以跟踪您执行特定动作的天数（即习惯），并在年度日历上突出显示您习惯了的日子。日期被加载到一个事件数组中，日历根据对后端服务器的异步调用的结果来读取日历。

问题是，由于某种原因，突出显示的日子适用于MacBook Chrome和Opera，但不适用于Safari。更糟糕的是，所有浏览器都没有突出显示iPhone上的日期。

但是，如果我将日期预加载到组件构造函数的events数组中，它们将显示在所有浏览器上。也就是说，以下日期始终会显示，因为它是从开始加载的：

  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，因此我仍然需要查找修复程序。