Bootstrap v3.1.1: Wrong glyphicons on iPad #13488

Closed
esitarski opened this Issue May 3, 2014 · 18 comments

Projects

None yet
@esitarski

Apologies if there is a known solution.

The iPad shows different glyphicons (user != camera, barcode != saxofone, tag != guitar, download != clock, x != putting green, checkbox != skis).

On a computer, Chrome, FireFox, Explorer and Safari show the correct glyphicons.

Are the incorrect icons due to an internal iPad configuration?
What needs to be done to remedy this problem?


iPad looks like this:
ipad


Chrome looks like this:
chrome

@DaSchTour
Contributor

This is not an bootstrap error, but an error in wrong CSS handling. You might check how your CSS is included and debug by connection the iPad with a Mac and check it with Safari Developer Tools.

@esitarski

I don't have an iPad or a Mac. That's why I use Bootstrap - it is my understanding that it supports multi-browser/platform.

The only css included on the page is:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

As you can see from the screen captures, the Bootstrap css is being applied on the iPad exactly the same as on Chrome, FireFox, Safari and Explorer.

Except the iPad glyphicons are wrong. 3-D guitars, saxophones, skis and golf holes are not barcodes, download arrows, tags and checkmarks (I can guarantee that the iPad images are not on my server).

Any ideas how to get bootstrap glyphicons to work on the iPad?

@cvrebert
Member
cvrebert commented May 3, 2014

@esitarski Do the Glyphicons on http://getbootstrap.com/components/ display properly on iPad for you?

@cvrebert
Member
cvrebert commented May 4, 2014

@esitarski Also, could you please confirm that you're using Bootstrap v3.1.1?

@mdo
Member
mdo commented May 4, 2014

This is emoji kicking in, isn't it?

@cvrebert
Member
cvrebert commented May 4, 2014

Yes. Presumably the Glyphicons font is failing to load, most likely due to a server configuration problem (wrong MIME type header?).

@esitarski

Using Bootstrap v3.1.1.

I found a link about fixing wrong-bootstrap-icons by de-installing emoji - see here. That seems like pretty bad behavior of emoji if it intrusively substitutes pictures on web pages.

Apple support explains that emoji may not appear properly on other devices - see here. However, nothing about showing emoji images instead of font chars on web pages.

Can you point me in a direction to check "wrong MIME type header"?
Specifically, how should the server configuration be changed to fix this?
Would it help to post the entire html for the page causing the problem?

If the server configuration is broken/misconfigured, is there an explanation why it works properly on Chrome, FireFox, Explorer and Safari, but not on "Mobile Safari" on the iPad?

My users have not yet got back to me on getting a check for the display of http://getbootstrap.com/components/ on this iPad. I hope to get something soon.

@hnrch02
Member
hnrch02 commented May 5, 2014

On which version(s) of iOS was this tested (I can spot that the first screenshots was taken on >= iOS 7) and were multiple devices affected by this? Also, please share the exact code used in your screenshots or a link to your live page, so we can try to reproduce this, but—as mentioned early—this is most likely a configuration error on your side and not a problem originating from Bootstrap itself.

@esitarski

Unfortunately, I don't have access to the iPad (I can't afford to get a copy of all the versions, browsers and machines that people might run the software on).

If it was a server error and the fonts could not be found, I can't see why it would work on any browser. Does anyone have a specific server configuration in mind?

I also found this.

According to the above, the incorrect behavior may be a symptom of Mobile Safari's caching bug. The effect is that causes displays the previously cache icons on new web pages. Clearing the CSS cache is described to fix the problem (well, at least until the user switches to another page and the font icons are wrong for that page).

That seems to explain the facts.
I will ask my users to clear their CSS cache on the iPad as that is described to fix the problem. If so, Apple's got some work to do.

@mdo
Member
mdo commented May 8, 2014

Closing as not a Bootstrap bug.

@mdo mdo closed this May 8, 2014
@jamchen
jamchen commented Feb 26, 2016

I encountered same issue and resolved it by removing woff2 font file from @front-face.

@hebbet
Contributor
hebbet commented Feb 26, 2016

@jamchen if that still happens with version 3.3.6 of bootstrap, file a new issue with an example.

@jamchen
jamchen commented Mar 2, 2016

Just for a record, I commented on this thread is not because it's an issue of Bootstrap. It's because this is on top of google search results while search this issue and I thought it will help someone like me who encounter similar problem. I can remove my comments if it leading to something unexpected or confusing. Totally understand, :)

Anyway, my fix turns out not working. I thought it worked just because it worked for a while.

According to , I moved the @font-face declaration out of SASS to html <style> tag and it works (probably I should wait for days :P ).

@ConnectedReasoning
ConnectedReasoning commented Apr 24, 2016 edited

I had this issue.

I discovered that my fonts directory was not in the
@font-face{src:url('../fonts/glyphicons-halflings-regular.eot');} path as described in the bootstrap css file. Rather than change my bootstrap css file location I moved my fonts so they would be found in the original bootsrap.css "../fonts" path.

Apparently when glyihicons (and fonts for that matter) are not found in the location described by your css the browser will try to find them where it can.

One thing that can throw you off is that the placement of your bootstrap css could be different to your font path between development and production so mind your font path relative to your css path.

@darrylyoung
darrylyoung commented May 24, 2016 edited

While this might not apply to most people, it's worth noting that this kind of thing – seeing awkward-looking emoji in place of your expected icons – can be a result of a user blocking web fonts with an iOS 9 Content Blocker. We just had this issue ourselves and I managed to reproduce it by downloading Focus (by Mozilla) and enabling the blocking of web fonts. When a font like this can't be downloaded, it appears that iOS replaces the usage with built-in emoji (a clock, in our case).

We can't force people not to enable such settings but we can certainly help ourselves here by doing things like base64-encoding fonts and storing them in local storage and having a network request (that could potentially be blocked) as the fallback if there's nothing in local storage or if the user's browser doesn't support it.

Anyway, I know this issue is closed and that this won't have caused the issue mentioned here (as iOS 9 wasn't released in May 2014) but I wanted to share my experience with fonts not loading and having iOS fall back to using emoji.

@darrylyoung

I see that you added a confused response, @DaSchTour. Is there anything I can explain a little better?

@RsD0p9BK

Try to use full path instead of relative - that's solve problem for me
@icon-font-path: 'http://sitename.com/fonts/';

@braamvandyk

@darrylyoung You Sir, are a genius. I disabled the content blocker on the user iPad and that was it. Problem = history.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment