Blank Squares - Occasional problem in Safari (iOS)
cosme-benito opened this issue · 48 comments
Whilte testing my app I have encountered this really annoying bug: the Font-Awesome icons occasionally do not load and show up as blank squares. This happens most frequently after a long period of inactivity, first logins or private sessions.
This does not seem to occur in any other browser, though I'm unable to test it in Safari for OSX.
I have tried to use a self-hosted and a CDN version and both appear to have the same problem. I have searched the web, found multiple people with the same problem but no actual solution. This does not happen with Glyphicon and only happens with Safari so I'm unsure on how to proceed.
I am experiencing the same problem on IOS9 or iPhone6 where the icons do not display. All browsers are fine. So not sure how to resolve this issue?
I'm currently having this issue as well. I've tried the CDN, self hosting and the sass gem. They all show are squares on iOS Safari. Sometimes they show after a while, often not.
This is happening on devices running iOS 8 & iOS 9.
It's not that they're unloading it's that they don't load at all.
At least in my case as noted in #7861 which you closed. I agree that they're probably connected, but in my case they don't load at all except in one test case on an older iPad. I can't get them to load at all on an iPhone 6, iPhone 5s, iPad mini or iPad air.
I don't have Apple hardware but everything is working fine on my simulator
Same issue here, with Safari, on a Mac. Running latest combination of MacOS and FA versions. No clue why only in Safari?
Noticed the problem when the Instagram icon went blank in Safari.
Make sure you don't have a content blocker installed that is blocking web fonts. I had that problem. I turned off my mobile safari content blocker and all was right again.
While testing on the iPhone6s I encountered a similar problem where none of the icons displayed initially, leaving a block of empty space instead. Upon refreshing the page the icons showed up. This is a problem for a public site because the customer will have the initial impression that the site is designed awkwardly.
Wanted to point out that I was experiencing this issue on iOS 9, and it was really frustrating the crap out of me. I was using 'Peace' as a mobile content blocker, but turned it off when testing and assumed that was enough. It wasn't. I had to actually whitelist my own site within the content blocker, even though it was turned off, to get the icon to show. Worked fine after that. Strange.
Also, Thanks @tinyfly for pointing me in that direction.
I've had this issue forever and it's really embarrassing and annoying. We use icons to show some status icons that could be like a check or remove sign and sometimes these icons randomly don't load leaving a page with missing status symbols.
Has anyone found a reliable solution to make this work?
Could you please check that other webfonts are working fine when font awesome has issues?
Google web fonts work fine
Is there a workaround for this yet?
On iOs and Safari my site often (but not always) fails to show font awesome icons. Firstly, I kind of rely on them appearing for the design to make sense.
But secondly, if the icons fail then link:hover and other animations don't work either. I get no console errors, so it could be some terrible coding on my part, but if the icons do load then everything works well.
Any new info would be great.
I just encountered similar issue on iPad Safari and Chrome, all font awesome icons were not showing, fortunately, I solved the issue. But my font awesome is a very old version: v3.2.1, maybe don't have to much value for reference, just post fixing process here, hopefully this can help anybody out there.
It's working fine on both Chrome and Safari on both desktop and iPad.
I just updated declaration of font-face in font-awesome.css, perviously, it is
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
I put the *.ttf to be the first src:
src: url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype');
@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype');
src: url('../font/fontawesome-webfont.eot?v=3.2.1');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
Hi,
I'm finally owning an iOS device.
I'm not able to replicate this issue on iOS 10.2.1/iPhone 7: I've a opened fontawesome.io in a tab about 3 days ago and icons are still there.
Since random comments will not help in identifying the causes of this issue, I will delete new comments which do not contain at least the following information
- Device
- iOS / OSX version
- How you are loading font awesome (Font Awesome CDN / self-hosted / MAXCDN)
- Where you are using font awesome (hybrid application, website)
@tagliala I've just come across this problem on a specific platform and below is the info:
- iPhone 5S
- iOS 10.1.1
- Loaded via MAXCDN, href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"
- Website
I have two more iOS devices which are working fine, they are iPhone 5 + iOS 10.2 and iPhone 7 Plus + iOS 10.1.1 respectively. The behavior seems to be quite random...
I encountered the same issue on iMac safari and i just fixed.
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
I experienced the same issue on multiple devices, seems quite random, probably on first visiting of the page.
- Macbook Pro
- Mac OS (newest, Sierra 10.12.4)
- self hosted
- website
If I refresh the page the icons are there. I can't systematically reproduce the issue.
Seems like it's related to iconic fonts. Interestingly, I also saw the same problem with an other iconic font set (http://zavoloklom.github.io/material-design-iconic-font/icons.html). I have screenshot about it. The problem is exactly the same with the 2 iconic fonts.
There are no console errors or anything and only happens very rarely. I didn't see the problem outside Safari
Is there any known solution for this issue?
You can use browserstack to explore this behavior.
So apparently this is not related to Font Awesome
When you are experiencing the issue, please check that other webfonts on the page are working.
Example:
Webfont "museo-slab" is working
Webfont "museo-slab" is not working (fallback on Georgia)
Other fonts and stylesheets are loaded and displayed properly, I and my testers only experienced this issue with iconic fonts (Font Awesome and the one I linked above), and very sporadically. So I believe it has something to do with iconic fonts, it may even be a browser or caching issue but it's related.
I recently encountered the same issue on iOS 10.3.3.
Turned out "Firefox Focus" was preventing the font to load. After disabling the "Safari integration" everything rendered fine (tested with fontawseome.io).
Simple way to fix it: use the cache buster.
When you include FontAwesome CSS like this:
<link rel="stylesheet" type="text/css" href="/path/to/font-awesome.css" />
Append ?v=1234 to the end of the value in href so it becomes like this:
<link rel="stylesheet" type="text/css" href="/path/to/font-awesome.css?v=1234" />
Done!
... but in my case, I appended it with a PHP date() value so that the "cache buster" value always changes:
<link rel="stylesheet" type="text/css" href="/path/to/font-awesome.css?v=<?= date('YmdHis') ?>" />
Hope it helps.
I’ve the same problem and I’ve tried everything. Generally, icons works fine but sometimes shows blank squares, only on iOS - Safari.
I’ve tried all the suggestions posted here but i can’t try with one thing, use the cache buster. I can’t do that because I developing a PWA and that doesn’t have sense (bad for performance and offline mode).
Any solution or suggestion? Thanks.
This is happening to one of our apps too, clear cache isn't helping, hard page refresh neither, the only user workaround I've found is to close the tab and to open it again, on re-opening everything is loaded.
@animaster looks like this solution is fixed my case.
@dmitrygusev but the user who add our web to homescreen and navigate it on standalone mode can't close any tabs!
@adrivelasco I feel your pain
guys I think I've found another solution. You can convert your web application to the native app via https://gonative.io/
We didn't really find a solution to fix this but it was occurring when the user added a shortcut in its launchscreen... Some kind of weird cache issue. He removed the old shortcut, created another one and the icons started to always show up...
We got this bug with Glyphicons. This is definatelly a bug with Safari.
- Mac OSX or iPhone OS (Safari 11.2 and 11.3)
- Self hosted CDN Apache
- Response headers:
Accept-Ranges:bytes
Access-Control-Allow-Headers:ul.date_courante
Access-Control-Allow-Origin:*
Cache-Control:public,max-age=1800,s-maxage=1800,no-transform
Connection:Keep-Alive
Content-Length:113604
Content-Type:application/font-woff
Date:Wed, 21 Feb 2018 15:49:01 GMT
ETag:"1bbc4-5598e5ec091a3"
Keep-Alive:timeout=5, max=100
Last-Modified:Tue, 19 Sep 2017 17:41:33 GMT
Server:Oracle-HTTP-Server
When you clear Safari cache, Icons are ok, all reload (F5) are ok too. The *.woff files appear "Cached (Memory)"
Right-Click safari, Exit/Quit
Going back in safari Icons appear with squares.
Using quotes for the font-familly seems to fix the issue. but it does not make sense at all!
@font-face{font-family:"custom-icon-1";...
With those headers on test server we are unable to reproduce, another solution:
Cache-Control:max-age=0,must-revalidate
This from @wendelsodres works for me: #7861
I'm using Firefox Focus's content blockers for safari,
turn out Firefox Focus can setting block web fonts
just turn it off, this issue will be fixed.
@tinyfly make me notice this, Thanks a lot!
iPhone 6s, iPad 9", iPhone 5c
iOS 11.1
Fontawesome CDN
website, not working neither Chrome & Safari
Same issue... empty boxes instead of the actual icons. It just worked once in the iPad, but it stopped working refreshing again.
Only solution it worked, the one commented by @animaster . Thans a lot but looks like a workaround :)
I occasionally have the same problem in safari 12 on osx - sometimes the symbols don't show up. it seems to be related to a cache problem. after clearing cache - all is good. Cannot reproduce the problem deterministically though.
@jclusso As we only use sort of three fa icons in the whole site that might be a good solution for us too. Thx.
@wunderkind2k1 yeah I’d recommend that personally. I used to love font awesome and I hate to have to say, but it caused us way more problems using as a font than it was worth. Now I just have my designer make me SVG icons for anything we need. You could just use the SVG sprites they provide and that would eliminate the weird font issues. My outlook is I don’t care to support browsers that don’t support SVGs reasonably well at this point because it’s 2018 and it’s time for everyone to use a modern browser haha!
https://fontawesome.com/how-to-use/on-the-web/advanced/svg-sprites
Edit: Ignore everything below. It's a complete red herring. I messed up. Sorry for the noise.
Hi. I've managed to pinpoint this down. Unfortunately I can't share anything at this time, but I can share what I've poinpointed it down to: When the main style.css is served with the headers 'Connection: keep-alive' and 'Keep-Alive: some value' then the problem occurs.
Removing these headers causes the problems to disappear for me.
My test cases looks like this
(1) With keep-alive
- start safari
- clear cache
- go to the webapp (css loaded from network, font files loaded from network)
- icons are loaded
- close safari (completely close it with cmd-Q, don't just close the window)
- open safari
- go to the webapp (css loaded from cache, font files NOT loaded)
- icons are not shown (blank squares instead)
(2) Without keepalive
- start safari
- clear cache
- go to the webapp (css loaded from network, font files loaded from network)
- icons are shown
- close safari (completely close it with cmd-Q, don't just close the window)
- open safari
- go to the webapp (css loaded from cache, font files NOT loaded)
~~- icons are not shown (blank squares instead)
I'll try to set up a self contained example. In the mean time if anyone can confirm these findings that would be nice.
We just solved this bug on iOS 11 in our application. It has nothing to do with Font Awesome in our case and it had everything to do with custom fonts in general.
In our case, our app did a redirect that happened as the font was loading and then would redirect to another page... consider the following;
- User visits index.html
- In JS, the font begins loading and we trigger a JS redirect to
other.html - The page begins navigating away
- Once
other.htmlloads (it loads the exact same content as the other page), the fonts are never requested from the network (cached?) and instead, are replaced with boxes, since the font was never applied
In our case, the solution was not to begin loading fonts if we knew we were going to redirect.
same url on two sites but one was not working, I've solved removed integrity and crossorigin attributes from link tag -.-, but at this point I'm not sure it direclty depends on it
edit: forcing https in the cdn url fixed the problem
I’ve the same problem and I’ve tried everything. Generally, icons works fine but sometimes shows blank squares, only on iOS - Safari.
I’ve tried all the suggestions posted here but i can’t try with one thing, use the cache buster. I can’t do that because I developing a PWA and that doesn’t have sense (bad for performance and offline mode).Any solution or suggestion? Thanks.
I'm almost in your same situation. Any news about the solution to this problem?
BTW The problem occurs not only in Safari but also in Firefox and Chrome on iPhone 5. It doesn't appen on iPad Air.
I’ve the same problem and I’ve tried everything. Generally, icons works fine but sometimes shows blank squares, only on iOS - Safari.
I’ve tried all the suggestions posted here but i can’t try with one thing, use the cache buster. I can’t do that because I developing a PWA and that doesn’t have sense (bad for performance and offline mode).
Any solution or suggestion? Thanks.I'm almost in your same situation. Any news about the solution to this problem?
BTW The problem occurs not only in Safari but also in Firefox and Chrome on iPhone 5. It doesn't appen on iPad Air.
You will need to treat the underlying cause then. Have you seen my post two messages above? Judging by some of the emojiis, it worked for some people.
I’ve the same problem and I’ve tried everything. Generally, icons works fine but sometimes shows blank squares, only on iOS - Safari.
I’ve tried all the suggestions posted here but i can’t try with one thing, use the cache buster. I can’t do that because I developing a PWA and that doesn’t have sense (bad for performance and offline mode).
Any solution or suggestion? Thanks.I'm almost in your same situation. Any news about the solution to this problem?
BTW The problem occurs not only in Safari but also in Firefox and Chrome on iPhone 5. It doesn't appen on iPad Air.You will need to treat the underlying cause then. Have you seen my post two messages above? Judging by some of the emojiis, it worked for some people.
@hilts-vaughan I think the problem relating the redirection is not my case since, on mobile, I just open (without redirection) pages where the Font-Awesome icons should appear and they don't (a white space is outputted instead of icons).
I'm closing here because this issue does not depend by Font Awesome, but feel free to keep commenting
what about another solution. You can convert your web application to the native app via https://appmyweb.net/