Table rendering problem in Safari

Normally table should render normally when data is loaded.

Only in Safari browser, table does not renders normally. No data is shown in table cells until the user zooms-in or zooms-out the screen. The problem is encountered in various versions of iphone while using various versions of Safari. The table loads normally in all other browzers.

HTML

No items for the selected date Reading Time Meter Reading Water Drawn {{head}} {{i + 1}} {{el.Site_Name}} {{el.Reading_From | date:'short'}} {{el.Reading_To | date:'short'}} {{el.Yesterday_Reading | number}} {{el.Today_Reading | number}} {{el.Total_Delivery_m3 | number}} {{ el.Total_Delivery_GPD | number}} --> Total {{ getGrandTotal('Total_Delivery_m3') | number }} {{ getGrandTotal('Total_Delivery_GPD') | number }}

TS

import { Component, Input, OnInit } from '@angular/core'; import { Output, EventEmitter } from '@angular/core';

@Component({ selector: 'app-daily-delivery-table', templateUrl: './daily-delivery-table.component.html', styleUrls: ['./daily-delivery-table.component.scss'] }) export class DailyDeliveryTableComponent implements OnInit {

@Input() dataTable: any[] = []; @Input() tableLoading: boolean = false; @Output() newDateEvent = new EventEmitter();

headElements = ['#', 'Site Name', 'From', 'To', 'Yesterday', 'Today', 'm3', 'GPD'];

constructor() { }

ngOnInit(): void {

}

getGrandTotal(key: string): number {

let total: number = 0;

for (let item of this.dataTable) {

  total = total + item[key];
}

return total;

}

dateEvent(newDate: Date): void {

this.newDateEvent.emit(newDate);

}

}

---