I'm using Font Awesome. Sometimes - and I haven't figured out the pattern yet, unfortunately - the icons aren't working in Safari. When this happens, Safari shows the standard icon for a missing character, the outline of a box.
When I reset the browser, Font Awesome works as expected. And then, after some time, it reverts to not working again.
I'm serving Font Awesome from Nginx. That could be relevant, because I originally served these files without the proper headers, which broke Font Awesome in Safari. I'm wondering if maybe somehow Safari could have cached the non-header versions of the files, and maybe somehow keeps using them even when cache is cleared (maybe it's caching fonts somewhere else? But why would it revert to the broken version?).
Okay, this isn't much to go on I know, but any ideas, has anyone else experienced this? Thank you! :)
Edited to add screenshot of broken behavior:
Related
we're stuck at a strange behavior in a clients project:
We have many SCSS files resulting in a compiled CSS file of 240000 characters in size.
I was able to develop in Safari without a problem.
Then a colleague started working on the same project using Chrome - he got a completely unstyled page. In Firefox he got the same problem. I tried it with Chrome and Firefox on the Mac too, and yep - they both won't display the page anymore.
"Anymore" because it worked fine. The only thing that changed is the SASS compilation workflow to use the Wordpress Plugin "WP-SCSS" instead of Grunt.
Our new compiled CSS seems to be bigger than the previous one. Maybe the underlying Foundation framework was customized, so that it did not include that many rules. Anyway: more rules should not end up in a broken stylesheet like in IE some years ago. Therefore Safari (both v9.1 and "Safari Technology Preview") render fine.
Yes, all browsers are up to date.
Yes, all caches are cleared.
Has anyone an idea, a hint, or a guess?
Problem.
Only Internet Explorer browser doesn't display font-awesome icon.
Funny thing is it's been working until yesterday.
This is a link, check this out.
Try the link above with IE, then there will be a white, thick horizontal line, which is supposed to include an "?" icon in the middle.
Try it again with Chrome, FireFox, Safari and anything, then "?" icon will appear in the middle of the line.
More info
I'm hosting this website on Microsoft Azure. It's free mode by the way.
There's no additional configuration for MIME type. This web is based on MVC5.
Strangely enough, CSS properties on :after persudo are all canceled in IE like there's overridings on the element or something ( which is absolutely not!! ), please inspect it with F12 tool. This is probably a clue for you. ( I completely have no idea of why the properties got canceled )
What I've done...
Setting MIME type manually
Checking if IE is on compatibility mode or registered as it is.
Looking at console log, to see if there's an error on any font-related resources.
Diagnosing with F12 network menu.
Googling with this issue and finding possible answers in Stackoverflow.
What seems to be the matter? It worked until yesterday but today it just doesn't all of sudden. I deleted some codes I added today, making the resources absolutely same as yesterday, but it still doesn't work. It drives me crazy!!
you must upgrade your font-awesome package and use this in #font-face{}
src: url('../font/font-awesome.eot?#iefix') format('embedded-opentype'),
i hope helfpul
I've recently noticed that links wrapped around Fontello icons are impossible to click on Safari 5.1.7 (or should I say "latest" Win realese"). I really don't know what could cause the issue (other browser are ok). I was trying to mess with web-inspector and unclik every custom style that could affect Fontello.
Is somebody aware of any Fontello/Safari incompatibilities?
Took me long enough to realize that somehow Google Fonts are causing some sort of issue when set on a parent of "a" containig fontello icon.
For now there is one solution that I've found - "a" has to have extra
font-family: "fontello"
See my fiddle - http://jsfiddle.net/Nippon/Qu6W5/
Is there other way around it?
Firefox does not seem to be completing every aspect of the stylesheet for the site (nsfw text) www.theshandy.com
Firefox seems to have implemented the body styling but none of the class or id styles. Every other browser seems to be having no trouble at all.
After doing some research I have tried fixing problems other people have found. The sheet is directly linked (not called by php). The type is definitely text/css. And I believe it has the correct utf-8 character set.
I am really at a loss.
Thank you very much.
EDIT SOLVED:
It was a rogue apostrophe in one of the early ID styles. Apparently chrome and safari will ignore is and firefox won't and it then refused to load the rest of the stylesheet (creating the idea that the body styles were loading but not others.
Thank you for trying to help!
Check your paths.. you might be using /css/style.css instead of css/style.css.
This could generate this problem.
I have a #font-face I am using for a site. It renders fine in everything except Safari, and only in one instance there. The issue fixes itself when I remove display: block.
Anyone have any idea why this is happening & how to fix it?
The exact issue is that the font is rendering 'pixely'.
Thanks in advance.
Use Google web fonts API; it'll save you hours of time and it's designed for cross-browser compatibility. # http://code.google.com/apis/webfonts/docs/getting_started.html