Safari浏览器中不显示滑块组件的边框半径

Question

我正在尝试为材质滑块组件应用自定义样式。

i）滑块组件的边框半径未在Safari浏览器中显示，

ii）第一次尝试更改滑块值，但是滑块中的颜色不继续。

这两个问题在safari浏览器中再现，下面是我重写滑块材料组件的代码。

 .mat-slider.mat-slider-horizontal .mat-slider-wrapper {
  top: 18px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
  height: 12px;
  border-radius: 10px
}
.mat-slider.mat-slider-horizontal .mat-slider-track-background,
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
  height: 100%;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
  background-color: blue;
}
.mat-accent .mat-slider-thumb {
  height: 30px;
  width: 30px;
  background-color: white;
  border: solid 2px gray;
  bottom: -20px;
  right: -20px;
}
.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
  background-color: white;
}

示例： 供示例参考 [Stackblitz]