Topic: Table rendering problem in Safari

hamza.talha free asked 2 years ago

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.


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 }}


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 {




Arkadiusz Idzikowski staff commented 2 years ago

@hamza.talha Please edit your post and provide an example HTML/TS code on which we will be able to reproduce this problem.

On which device/safari version did you test our component?

Arkadiusz Idzikowski staff commented 2 years ago

@hamza.talha Thank you for the additional information. Could you please fix the code formatting? Currently, it is unreadable, code in the HTML section does not look like a valid HTML.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB4 11.1.0
  • Device: iPhone (various models)
  • Browser: Safari (various versions)
  • OS: iOS
  • Provided sample code: No
  • Provided link: No