Angular Material Calendar在Safari中点击任意日期后今日日期始终高亮，如何修复？

问题描述 #

点击Angular Material Calendar上的任意日期时，今日的日期方块会被高亮显示——哪怕它处于其他月份也会出现这个情况。在官方文档示例中也能复现该现象，所以我怀疑这是特性而非bug，但这个问题仅出现在Safari浏览器中，本质是点击日历后今日日期意外获取了焦点导致的高亮。

复现代码 #

模板代码 #

<mat-card class="demo-inline-calendar-card">
  <mat-calendar [(selected)]="selected"></mat-calendar>
</mat-card>

组件代码 #

import {Component} from '@angular/core';

/** @title Datepicker inline calendar example */
@Component({
  selector: 'datepicker-inline-calendar-example',
  templateUrl: 'datepicker-inline-calendar-example.html',
  styleUrls: ['datepicker-inline-calendar-example.css'],
})
export class DatepickerInlineCalendarExample {
  selected: Date | null;
}

解决方法 #

最简洁的方案是通过自定义CSS覆盖Safari下的焦点样式，移除今日日期的异常高亮：

通用CSS修复 #

/* 针对日历中今日日期的元素，移除焦点高亮 */
.mat-calendar-body-today:focus {
  outline: none;
  /* 保留原本今日日期的背景样式，避免移除焦点后样式丢失 */
  background-color: rgba(0, 0, 0, 0.04);
}

仅针对Safari的精准修复 #

如果不想影响其他浏览器的默认行为，可以通过浏览器特性检测，只在Safari中生效：

@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {
    .mat-calendar-body-today:focus {
      outline: none;
      background-color: rgba(0, 0, 0, 0.04);
    }
  }
}

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