Проблема размера спрайта в веб-браузерах

Question

У меня проблема с размером спрайта CSS в разных браузерах. Некоторые из значков выглядят как другие значки, отображается под ними. Есть разделы, в которых один и тот же код по-разному показывает один и тот же значок на веб-странице.

Это проблема расчета единиц? Какова, по вашему мнению, лучшая практика для изменения размера спрайта? Спасибо за обсуждение и вашу помощь!

HTML

<h1>Wideo</h1>

CSS

section h1 {
  position: relative;
  display: inline-block;
  font-size: 1.9375rem;
  font-style: italic;
  letter-spacing: -0.0375rem;
  line-height: 1.625rem;
  word-break: break-word;
  text-align: center;
  margin: 0 0 1.25rem 1.5625rem;
}

section h1:before {
  position: absolute;
  top: 6px;
  left: -40px;
  font-size: 0.9375rem;
} 

СПРИТ CSS

section h1:before {
  background-position: 0em -75.7em;
  width: 2.2em;
  height: 2.2em;
}
section h1:before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  background-image: url(../svg/sprite.svg);
  background-repeat: no-repeat;
  background-size: 24em 82em;
}

С наилучшими пожеланиями,

Kuba