Я использую большой значок из шрифта значка, который мой клиент поставил в качестве логотипа заголовка на главной странице веб-приложения. Логотип занимает 60% ширины устройства и состоит из большого круглого логотипа (около 40% от значка) с текстом ниже и шириной до 60% устройства в портретном режиме.

Я получил логотип с текстом в виде одного значка со значком вектора, потому что клиент хочет, чтобы текст соответствовал требованиям CI брендов.

_____###_____
____#####____
_____###_____
Slogan is here

На предварительном просмотре на рабочем столе и в моем браузере Google Nexus 4 Dolphin все выглядит хорошо, но в chrome (на nexus) слоган обрезан примерно так: «Слоган - это ч». Если я переключаюсь в альбомный режим, он снова отображается правильно.

.header-box-logo {
  color: #fff;
  font-size: 6.4rem;
  margin: 1rem auto;
  display: inline-block;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'iconfontnamehere';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Я использую пользовательскую версию Foundation 5 и Iconmoon. Я не могу показать вам демо, так как все изображения связаны с NDA.

Я в растерянности, есть идеи, почему это происходит?