I use Bootstrap 3.0.3 glyphicons. All is ok on desktop browsers and on Android devices. My problem is about Apple devices (tested on iPhone and iPad running iOS7).
The glyphicons look like emoticons. I've found some issues but not answering my problem.
Here is the link to view the screenshot : http://www.fredericblancheton.fr/imgdisallow/image.png
Thank you for your help.
I had a similar problem, but only when another font was included via font-face inside the stylesheet. It seems that mobile safari or safari in general has a very short timeout for loading fonts which are included via font-face syntax.
I had to remove the font from the main stylesheet and add the font-face syntax directly in the sites header using <style></style> syntax. Weird.
Another approach is illustrated over at filamentgroup, which are using the Data-URI syntax for the font and loading these asynchronously via javascript. This should also trick the browser to wait longer.
-> http://www.filamentgroup.com/lab/font-loading.html
We've seen the same problem in our app - it's totally bizarre. It happens when the user has installed an old Emoji app ("Emoji Free!", which I can no longer find in the app store).
The only solution was to get the user to uninstall the app.
I encountered same issue and resolved it by removing woff2 font file from #font-face. It seems iOS doesn't support woff2.
[Updated 2016-03-02]
Fix above turns out just matter of luck (timing?).
#rofflox 's answer which seems to be more promising and it works for me.
I just tried the solutions above and none of them worked for me. It turned out that:
I had updated bootstrap to 3.3.6 css
I didn't update the font files that came with it
Getting the latest version of the font files fixed my issue with the unwanted emojis.
I started getting this error today using Pulsar for Salesforce, I turned out that my FE DEV had included references to Fonts and forgotten to update the static resources with the new fonts! In case that helps someone.
Related
I was all excited over Polymer and starting developing a web app. I soon found out that Firefox fails loading the site correctly, see this SO post for details:
Polymer: Layout screwed up in Firefox, fine in Chrome
Then, I downloaded the latest version of Chrome on an iPhone 4 (iOS7) and the same thing for iPhone 6 (iOS8) and tried the website. I see the same errors as I see on Firefix (please see the link above).
In other words - going to my Polymer based website using Chrome for iOS fails just as bad as Firefox fails.
So, I'd just like to confirm that this is the case: Polymer does not work on iOS (no support in Safari, no support in Chrome for iOS). Correct?
As I also noted in my other SO question linked above, I was expecting it to work in all browser due to "polyfill", but that doesnt seem to help.
Am I missing something? =)
Note: Using Chrome for Android works fine, no errors there.
As I mentioned in the other thread, it's impossible to polyfill CSS scoping. Chrome on iOS is not actually Chrome, it's built using the iOS WebView (an old one at that), meaning there's no native Shadow DOM and no CSS scoping. The Shadow DOM polyfill does properly wrap DOM API methods like querySelector and getElementById, so you do get limited encapsulation, in that respect. But for CSS, the only thing the polyfill can do is rename your selectors, so :host .blah gets renamed to x-foo .blah and appended to a style tag in the head. It means you need to still write defensive CSS (as you do today) and avoid very loose selectors because they will be applied.
I experienced something very weird today and maybe it might help you.
My firefox was rendering as if polyfills didn't existed.So i went back to false on about:config dom.webcomponents.enabled and it came back to life.
Why? no clue.It worked, so, if you have dom.webcomponents.enabled true on firefox about:config might as well give it a try. IMHO looks like a polyfill bug on capable (yet buggy and poorly supported) web components browsers. worth a try.
My Rails app on localhost started randomly refreshing when using the 'back' browser arrow. Chrome(31.0.1650.48) console reads:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
I guess these issues are connected.
I also found this recent issue on jQuery bugtracker. Funny thing, but 10 hours ago everything was fine.
Anyone experiencing similar problems? What are the options?
EDIT: although I was browsing my app on localhost, I found out that a number of production websites are experiencing the same problem, showing the same console output, including 37signals
I believe this is largely due to the newest version of Chrome that you are using. I haven't found the exact details but it appears that Chrome has decided to deprecate this property which is currently used by jQuery.
Since it's just a deprecation, nothing will be broken yet, but it does mean that it will be removed in the future. Once jQuery fixes the issue you should probably try to update.
Edit: Sorry I missed the point - I would assume that the random refreshing is unrelated to the message you are seeing about event.returnValue
Check this link out Looks like the native js method 'event.returnValue' has been marked as deprecated in newer Chrome versions. http://bugs.jquery.com/ticket/14320
Bootstrap is a very cool, but for some reason all icons (and icons inside buttons) are not serving up at all in IE 7 & 8.
All that is coming up is a square symbol.
I can live with non-rounded boxes in IE, but the icons are kind of a must. Any ideas?
(if it makes any difference, we're running rails as the platform with the twitter-bootstrap-rails gem.
Thanks!
Make sure you have declared the doctype in your HTML.
<!doctype html>
I assume the icons are correctly served on other web browser and you are using 2.0.4.
You can try to clear the ie cache.
Or maybe http://fortawesome.github.com/Font-Awesome/ (ie7 is supported)
There's a list of issue specific to ie on GitHub : https://github.com/twitter/bootstrap/issues?labels=ie&page=1&state=closed
But don't see any related to your problem.
If none of the answer make sense to you, post some code (jsFiddle would be ideal but since the picture is expected to be in /img it will not works without editing bootstrap.css)
I am currently coding a site that is using an extensive amount of sifr'ed links. The appearance of the sifr'ed text is fine, however the links only seem to work in Safari. I have seen that there are several other people having trouble with firefox with older versions of sifr, however I have updated to the latest nightly build for Sifr3.
The site is www.lauravinchesi.com/final/
Any help would be greatly appreciated.
Make sure to not replace the <a> directly, but replace its parent element.
I am currently developing a webpage where I want to use the ToggleClass function from jQuery. I went on to the jQuery UI website, as I think this is an extension of the original jQuery.
http://jqueryui.com/demos/toggleClass/
When I click the 'Run Effect' button, nothing happens. Is it just my browser or slow computer or do any of you also get this in Safari 4.0.1 4.0 (4530.17)?
I tested in Firefox 3.0.10 and it worked, so by the looks of it, jQuery UI is not all that compatible with Safari 4.0.1 4.0 (4530.17), or just maybe their demos on their site?
Anyone care to elaborate?
Edit: sorry, was under the impression that I had 4.0.1
Windows: Safari 4.0 (530.17): Fail
That being the case, .animate() still appears to work. If your transformation isn't too complicated, you could use that as your alternative.
I had the same problem, but I knew it was my code b/c the example page at the reference you provided above worked just fine.
Check your .css. For some reason, the css
'a.filterOn:link, a.filterOn:visited{
background: green;
}'
wouldn't work in Safari, but worked just fine in FF. However, b/c these were nested inside of another element, I tried:
'#filters a.filterOn:link, #filters a.filterOn:visited{
background: green;
}'
which for some reason worked. My guess is that, if you haven't solved it yet, the problem is in the .css, not the jquery.