HTML 5 input range-thumb disappeared after updating Chrome to version-49

Question

I've themed HTML5 input range-thumb in one of my Client website using pseudo classes :after and :before and using the -webkit- prefix. And it was displaying all fine until I updated my Chrome browser (Desktop, Windows 7) to Version 49.0.2623.87 m.

Can anyone please suggest, what has changed here?

Thanks!

---

Here is the css I used for Chrome:

input.thickness {
  -webkit-appearance: none;
  float: left;
  width: 72%;
  margin-right: 20px;
  margin-top: 8px;
  margin-left: 0 /*for firefox*/;
  padding: 0 /*for IE*/;
}
input.thickness:focus::-webkit-slider-runnable-track {
  outline: none;
}
input.thickness::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background-color: #2f9de2;
  border-radius: 4px;
}
input.thickness::-webkit-slider-thumb {
  -webkit-appearance: none;
  position: relative;
  background: transparent;
  width: 22px;
  height: 12px;
  margin-top: 8px;
}
input.thickness::-webkit-slider-thumb:after,
input.thickness::-webkit-slider-thumb:before {
  bottom: 0;
  left: 0;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
input.thickness::-webkit-slider-thumb:after {
  border-color: rgba(136, 183, 213, 0);
  border-bottom-color: #2f9de2;
  border-width: 10px;
}
input.thickness::-webkit-slider-thumb:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #2f9de2;
  border-width: 10px;
}

<input class="thickness" type="range" min="0" max="100" value="50" />

Answer 1

This is intentional. It's also on par with Gecko's behaviour.