large Iconfont icon cut off on the right side

Question

I'm using a large Icon from an icon font my client delivered as a header logo on the index page of a web app. The logo is as large as 60% of the device width and consists of a large round logo (about 40% of the icon) with text below and as wide as 60% of the device in portrait mode.

I got the logo with text as one vector icon font icon because the customer want's the text to be exactly as the brands CI demands.

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

It looks alright on the desktop preview and my google nexus 4 Dolphin Browser but in chrome (on the nexus) the slogan is cut off somewhat like this "Slogan is h". If I switch to landscape, it's displayed correctly again.

.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;
}

I'm using a custom version of foundation 5 and iconmoon. I can't show you a demo as all images are bound by the NDA.

I'm at a loss here, any idea why this happens?

Stonefish

Have you tried a different font-size unit? What happens if you use em instead of rem, or even px or something? (The latter might not be what you want, I assume, but just to see if this is a bug.) – Naldo

have you found a solution to this problem yet? – Assembled

Sadly I have not. I was able to "minify the damage" by using media queries to some extent but as this project left my hands, I do no longer work on this problem. The customer decided it was "good to go". I still have a copy of the anonymized code excerpt from the project so I'll maybe build a demo case for this in the future to find a better solution. – Stonefish

Answer 1

In my case I solved the problem by prioritizing the svg format for fonts. Which is unfortunate, since it has the largest footprint (enabling http compression helps though)

As well make sure not to use the # symbol in your font url:

@font-face {
    font-family: 'myIconFont';

    src:url('fonts/myIconFont.eot?-7pdf04');
    src:url('fonts/myIconFont.eot?#iefix-7pdf04') format('embedded-opentype'),
        url('fonts/myIconFont.woff?-7pdf04') format('woff'),
        url('fonts/myIconFont.ttf?-7pdf04') format('truetype'),
        url('fonts/myIconFont.svg?-7pdf04') format('svg');
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'myIconFont';
        src: url('fonts/myIconFont.svg?-7pdf04') format('svg');
    }
}

Assembled

Answer 2

This is a known issue in Chrome on Android and it's a pretty infuriating one. Have had it in a few situations myself. Seems to manifest whenever the browser:

• Is in landscape
• The object in question or one of its ancestor is centered by any method (text-align, absolute positioning or margin: 0 auto)

The bug has been mentioned in the chromium forums: https://code.google.com/p/chromium/issues/detail?id=391183

I wish I had a way to resolve it, but at the time of writing there doesn't seem to be a definitive solution. Lets hope a bug fix comes soon.

Lindbergh

Answer 3

Try it media query

/* Galaxy Nexus (portrait and landscape) ----------- */
@media only screen and (min-device-width : 360px) and (max-device-width : 598px) {
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

/* Galaxy Nexus (landscape) ----------- */
@media only screen and (min-width : 361px) and (orientation: landscape){
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

/* Galaxy Nexus (portrait) ----------- */
@media only screen and (max-width : 360px) and (orientation: portrait) {
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

/* Nexus 7 (portrait and landscape) ----------- */
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

/* Nexus 7 (landscape) ----------- */
@media only screen and (min-width : 604px) and (orientation: landscape) {
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

/* Nexus 7 (portrait) ----------- */
@media only screen and (max-width : 603px) and (orientation: portrait) {
    [class^="icon-"], [class*=" icon-"] { font-size: 1.6em; }
}

List

I could do that for debugging but I'm trying to understand the problem, especially as it only exists on one device/browser which I think should work well with standard code. – Stonefish