Гистограмма c неточно отображается в chrome

Question

Я столкнулся с проблемой гистограммы c в chrome. Как показано на изображении, похоже, что внутри прямоугольника angular есть трубка, когда chrome используется для отображения. введите описание изображения здесь

Но это не case для IE / firefox. Почему это так? Что я могу сделать, чтобы получить график c, как показано в IE / firefox. введите описание изображения здесь

meter {

  width: 22vw;
  height: 3vh;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow: 1px 1px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
    border-radius: 3px;
    display: inline-block;
    -webkit-appearance:none;
}

.legend_meter{
    width:4vw;
    height: 4vh;
    border:solid 1px;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow: 1px 1px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
    border-radius: 3px;
    margin-left:3vw;
    display: inline-block;
}