SentinelSixSpy SentinelSixSpy - 2 years ago 88
Less Question

Angular md-switch .md-thumb color is not displaying correctly when toggling the switch

The md-switch when toggled on the Safari browser displays a yellow section on the md-thumb section of the switch.

enter image description here

The toggle should just be that blue color and have no yellow. It turns yellow after toggling the switch on or off. Other browser handle this toggle switch fine. The

md-bar
is fine, but the `md-thumb' is what is yellow. I tried setting everything to the blue I am using...

LESS

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>


But this only dimmed the yellow. The yellow was still visible and this only happens in Safari when the switch is toggled on or clicked to toggle off. Any idea on how to remove this?

Answer Source

I found a work around for this issue. If you set display: none on the md-switch .md-thumb: before and md-switch .md-ripple-container it will stop the color glitch. You will lose the ripple when toggling the switch but there will no longer be this combination of colors. The issue itself is due to different colors coming through and combining to make this yellow color. This is an issue only on the Safari browser, but this is an easy workaround and will solve the issue on all browsers.

The code will look like:

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

md-switch .md-ripple-container {
display: none;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download