material-design-lite
material-design-lite copied to clipboard
Checkbox bug with latest version of Chrome 69.0.3497.81
When using the latest version of Chrome 69.0.3497.81, there is some kind of white border in the checkbox. This does not occur for other browsers or older version of Chrome. You can see the issue when viewing https://getmdl.io/components/index.html#toggles-section in Chrome 69.0.3497.81

Maybe just wait for a Chrome update. Chrome 69 has some bigger issues (https://bugs.chromium.org/p/chromium/issues/detail?id=880513).
Update: Google pushed a update to patch for the above mentioned bug, but the checkbox is still broken.
Glad I saw this -- thought I was going mad suddenly seeing these gaps in the checkbox, thinking that it was something I introduced in one of my CSS overrides.
Here's a quick patch for the time being:
.mdl-checkbox__tick-outline {
width: 104%;
}
Issue still present in Chrome 71.0.3578.98
I found disabling the mask fixes it also:
.mdl-checkbox__tick-outline{
-webkit-mask:none;
mask:none;
}
Appears to be fixed in Chrome 72.0.3626.96
I am experiencing pretty much the same problem on the current latest Chrome (105.0.5195.102). The only difference is that now only the left edge of the checkbox has a transparent border. None of the above workarounds seem to do anything.