The color of the Angular md-switch .md-thumb is not showing up properly when switching the toggle

Question

The color of the Angular md-switch .md-thumb is not showing up properly when switching the toggle

In Safari, the md-switch displays a yellow section on the md-thumb when toggled. However, other browsers handle the switch without any issues. The md-bar appears fine, but the md-thumb is yellow. I have tried setting everything to the blue color 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>

Unfortunately, this only dimmed the yellow color. The yellow is still visible, and this issue only occurs in Safari when the switch is toggled on or off. Any suggestions on how to completely remove this yellow color?

html css angularjs safari less

Answer 1

Answer №1

To address this issue, I have discovered a solution. By applying the CSS property display: none to both md-switch .md-thumb: before and md-switch .md-ripple-container, the color glitch can be eliminated. Although this will remove the ripple effect when toggling the switch, it will prevent the unsightly combination of colors, which is caused by conflicting colors producing a yellow hue. This problem is specific to the Safari browser, but implementing this straightforward workaround will resolve it across all browsers.

Simply add the following code:

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

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

Answer 2

To address this issue, I have discovered a solution. By applying the CSS property display: none to both md-switch .md-thumb: before and md-switch .md-ripple-container, the color glitch can be eliminated. Although this will remove the ripple effect when toggling the switch, it will prevent the unsightly combination of colors, which is caused by conflicting colors producing a yellow hue. This problem is specific to the Safari browser, but implementing this straightforward workaround will resolve it across all browsers.

Simply add the following code:

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

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

The color of the Angular md-switch .md-thumb is not showing up properly when switching the toggle

Answer №1

Similar questions

When bootstrap buttons are displayed inside a Vue component, there should be no spacing between them

display directories and subdirectories within a side panel

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

Using postMessage to communicate with the localstorage of an iframe from a separate domain

How can you insert text onto a page with restricted space?

seeking a solution to simulate a variety of web browsers

creating a table with only two td's for formatting

Creating dynamic links between two cells of two HTML tables within an HTML email using JavaScript

Text alignment and block dimensions

Simplified user interface for detecting radio button clicks

What is the best way to create a unique background shape for Bootstrap 4 carousel controls?

What is the reason for the directive being available in $rootScope?

Error with Unexpected Token HTML found in IBM Domino Web application

Guidelines for Implementing Stylesheets from a Referenced Node Module

How can I eliminate padding from events in FullCalendar's timeGrid view?

Transform the appearance of a button when focused by utilizing CSS exclusively or altering it dynamically

Obtain a collection of custom objects through an HTTP GET request to be utilized in an Angular 2 application

What is the process for extracting specific text from a web page source using Python with Selenium?

Executing PHP function from an HTML form

Exploring the process of extracting data from a JSON response using AngularJS