html - 切换开关时，Angular md-switch .md-thumb 颜色显示不正确

Question

在 Safari 浏览器上切换时，md-switch 在开关的 md-thumb 部分显示黄色部分。

开关应该只是蓝色，没有黄色。打开或关闭开关后，它会变成黄色。其他浏览器可以很好地处理这个切换开关。 md-bar 很好，但是 `md-thumb' 是黄色的。我尝试将所有内容设置为我正在使用的蓝色...

少

md-switch .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}

md-switch.md-checked .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}

md-switch[disabled] .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}

HTML

<md-switch ng-model="orgAdminSwitch" class="md-primary" ng-change="orgAdminChanged(orgAdminSwitch)" ng-show="isAdmin" aria-label="Org Admin Switch" style="float: right;"></md-switch>

但这只会使黄色变暗。黄色仍然可见，这仅在打开开关或单击关闭开关时才会在 Safari 中发生。关于如何删除它的任何想法？

Answer 1

我找到了解决此问题的方法。如果您在 md-switch .md-thumb: before 和 md-switch .md-ripple-container 上设置 display: none 它将停止颜色故障。拨动开关时您将失去波纹，但将不再有这种颜色组合。问题本身是由于不同的颜色通过并结合形成这种黄色。这只是 Safari 浏览器上的一个问题，但这是一个简单的解决方法，可以解决所有浏览器上的问题。

代码如下所示:

md-switch .md-thumb: before {
display: none;
}

md-switch .md-ripple-container {
display: none;
}