Ion-datetime日历视图空白：安卓8/Chrome端白字白背景问题

• 安卓8系统中打开ion-datetime日历模式时界面空白，部分PC端Chrome用户也存在该问题
• iOS系统无论浅色或深色模式均运行正常
• 根因：日期数字颜色为白色，与白色背景冲突

相关代码示例 #

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

临时修复方案（仅关闭重开后生效） #

ion-datetime {
  &:not(.datetime-placeholder) {
    color: black;
  }
}

更新说明 #

进一步排查发现，CSS中color属性被设置为currentcolor（截图显示该样式定义）

内容的提问来源于stack exchange，提问作者MadMac