css - 大きな Iconfont アイコンが右側で切り取られている

Question

クライアントが Web アプリのインデックス ページのヘッダー ロゴとして配信したアイコン フォントの大きなアイコンを使用しています。ロゴは、デバイスの幅の 60% の大きさで、大きな丸いロゴ (アイコンの約 40%) で構成され、その下に縦向きモードでデバイスの 60% の幅のテキストが表示されます。

顧客は、ブランドの CI が要求するとおりのテキストを望んでいるため、テキスト付きのロゴを 1 つのベクター アイコン フォント アイコンとして取得しました。

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

デスクトップ プレビューと私の google nexus 4 Dolphin Browser では問題ないように見えますが、chrome (nexus 上) ではスローガンが「Slogan is h」のように途切れています。ランドスケープに切り替えると、再び正しく表示されます。

.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 に拘束されているため、デモをお見せすることはできません。

私はここで途方に暮れています、なぜこれが起こるのか分かりますか?