Grouping pseudo elements breaks CSS

The code below works fine.

input[type="range"]::-webkit-slider-runnable-track {
  background-color: #000;
}

input[type="range"]::-moz-range-track {
  background-color: #000;
}

<input type="range">

Neither code block below works for some reason.

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track {
  background-color: #000;
}

<input type="range">

input[type="range"]::-moz-range-track,
input[type="range"]::-webkit-slider-runnable-track {
  background-color: #000;
}

<input type="range">

Does anybody know why grouping these pseudo selectors together breaks CSS?

A regular selector list is unforgiving. If any member of the list is invalid, then the entire selector list is invalid, and so it is ignored.

Vendor-specific selectors are only valid in the browsers that support them. Since the validity of -moz-* and -webkit-* are mutually exclusive, combining them in a selector list will always be invalid.

Selector lists inside :is() are forgiving, but that won't help here because pseudo-elements inside :is() don't match anything.