Ion-datetime - calendar view blank - white text on white background - android / web - ionic-framework

Question

When I open the ion-datetime in calendar mode it is blank on Android 8.
Some users also get this in chrome on PC.
It seems fine on ios in either light or dark mode.
It seems the color of the day numbers is white on a white background.
Code:
<ion-col *ngIf="startDateType === 'future'" class="date-start-container">
<ion-datetime-button color="dark" datetime="dateControlStart"></ion-datetime-button>
<ion-modal [isOpen]="isStartDateModalOpen" [keepContentsMounted]="true">
<ng-template>
<ion-datetime id="dateControlStart" class="shadow-override" #dateControlStart
[value]="dateStartString"
presentation="date"
[showDefaultTitle]="true"
[showDefaultButtons]="true"
[min]="dateStartString"
[max]="dateFutureString"
(ionChange)="onDateStartChange($event)"
>
<span slot="title">Select a membership/pass start date</span>
</ion-datetime>
</ng-template>
</ion-modal>
</ion-col>
Partial fix:
I managed to get it partially fixed using this but it only works if you close and then reopen the ion-datetime.
ion-datetime {
&:not(.datetime-placeholder) {
color: black;
}
}
Update:
The color is set to currentcolor in the css.

Answer 1

I have found what is causing the issue.
I was using *ngIf in the containing element.
I have replaced
<ion-col *ngIf="startDateType === 'future'" class="date-start-container">
with
<ion-col class="date-start-container" [ngClass]="{'hide-me': startDateType !== 'future'}">
<ion-datetime-button color="dark" datetime="dateControlStart"></ion-datetime-button>
<ion-modal [isOpen]="isStartDateModalOpen" [keepContentsMounted]="true">
<ng-template>
<ion-datetime [ngClass]="{'ion-datetime-fix': applyIonDateTimeFix}"
...
async ngOnInit() {
setTimeout(() => {
this.applyIonDateTimeFix = true;
}, 5000);
}
.ion-datetime-fix {
color: black!important;
}
.hide-me {
display: none!important;
}