I'm using phantomjs version 1.9.7 which I believe is supposed to support web fonts. I have inserted the font with google web fonts however it is just displaying my fallback font when I automate a screengrab. The webfont is displaying fine in all my browsers. Are there any workarounds for this?
I have struggled with this issue for several hours. Well, there is a simple reason for this controversy: user-agent!
Some services such as Google Fonts are returning different CSS content based on user-agent. When you call a webpage which includes Google Fonts with default PhantomJs user-agent, Google would return TTF version which is supported in PhantomJs.
However, if you set a custom user agent (Chrome, FF, etc.), Google Fonts would return .woff2 version. .woff2 is not supported in PhantomJs 2.x. Obviously, fonts are not going to be loaded.
So, for users who are testing PhantomJs without setting a generic user-agent, Google Fonts is working. If they set for example Google Chrome user-agent, it does not work.
So, you have two options:
Avoid setting a custom user-agent if it is possible.
Avoid using dumb-smart font providers like Google Fonts which does not outputting all font versions in CSS and let the browser decide what it needs.
I believe your belief is wrong :-)
The 1.9.x series of Phantom is still based on the old WebKit code, which people have been reporting web font problems with all along.
The good news is that a technical preview of Phantom 2.0 is apparently about to be released; https://github.com/ariya/phantomjs/wiki/PhantomJS-2 is intended to be the best place to follow status. And, from memory, someone reported success with web fonts using it (but I may be wrong on that as a quick search of the mailing list archives didn't turn up a definitive message saying web fonts work... but they definitely should).
BTW, SlimerJS is an almost drop-in replacement, based on Firefox's Gecko engine, and does support web fonts (though some problems in corner cases, IIRC).
I just had the same issue with PhantomJS 2.1.1.
In my case I was working under a proxy that was blocking PhantomJS from loading the font from Google. After connecting to an open network it rendered correctly.
I tried all fixes listed here to no avail, but here is a work around. Either option resolved this for me.
First Option:
Install the missing web fonts on the local computer that is running PhantomJS. Most web font providers including Google allow you to easily download the fonts for local install. No change needed at the target URL.
Second:
I sites I have control over, I was able to resolve by splitting up the link tags.
Change This from:
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
To:
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
I know this is not an ideal solution but either one works, It depends on if you can modify the target URL.
Related
Below are two screenshots from the same version of Chrome. I would like to know when and why header names sometimes are displayed with different word capitalization and also when is the view source/view parsed toggle available? I've read the developer tools documentation which says nothing about it and tried to load pages in different ways. The only pattern i suspect is content compression, could that be it?
Update: nope seen both versions on sites using gzip
It seems that it happens only for resources served over HTTP2/SPDY (compare this image served over HTTP2 with the same image served over HTTP). There is an old Chrome bug that proves that HTTP2/SPDY headers are being handled differently. I reported this as a bug here.
Dear stackoverflow experts,
I've been reading in stackoverflow forum about the issue but didn't find a solution
I'm experiencing a problem with my website https://baliradar.com
since I installed SSL. I changed all the http links by https.
However I cannot resolve the problem of insecure font though, here's the console log error message:
Mixed Content: The page at 'https://baliradar.com/' was loaded over HTTPS, but requested an insecure font 'http://fonts.gstatic.com/s/lato/v11/nj47mAZe0mYUIySgfn0wpQ.ttf'. This request has been blocked; the content must be served over HTTPS.
I have been searching for hours with FileZilla in the files of my theme "winning agent pro" and in other directories of my website but I never found the html code for the font. I tried to search for specific keywords ("fonts", "gstatic") in my File Manager from my CPanel but there's no records found.
I also tried to use the "Developer Tool" of Chrome to find the source of the font without success.
I'm clueless here and was wondering if someone has an idea or a solution?
Thank you for your time.
Xavier
There are several http:// links in your CSS code, which is linked in your header as <link
rel="stylesheet" type="text/css" href="https://baliradar.com/wp-content/cache/minify/000000/e4a39/default.include.08bf2a.css" media="all" />:
.mCSB_buttonRight{background-position:-80px -56px}#font-face{font-family:'Lato';font-style:normal;font-weight:300;src:local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/nj47mAZe0mYUIySgfn0wpQ.ttf) format('truetype')}#font-face{font-family:'Lato';font-style:normal;font-weight:400;src:local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/v0SdcGFAl2aezM9Vq_aFTQ.ttf) format('truetype')}#font-face{font-family:'Lato';font-style:normal;font-weight:700;src:local('Lato Bold'), local('Lato-Bold'), url(http://fonts.gstatic.com/s/lato/v11/DvlFBScY1r-FMtZSYIYoYw.ttf) format('truetype')}#font-face{font-family:'Lato';font-style:normal;font-weight:900;src:local('Lato Black'), local('Lato-Black'), url(http://fonts.gstatic.com/s/lato/v11/4cKlrioa77J2iqTqBgkRWg.ttf) format('truetype')}.currencyr{position:fixed;z-index:2147483647}.currencyr .currencyr-container,
As it seems that this is a minified version of your css, search in your current theme's css-files for the http phrase. You can do so using grep for example:
grep 'http://fonts' * -R
In my case, this issue was caused by my caching plugin (W3 Total Cache). Disabling it solved the issue but you may want to keep the plugin and change the font URLs in the CSS file from HTTP to HTTPS.
I came across this issue when the Social Pug plugin stopped showing
icons on the social media buttons. The root cause was the caching
enabled by W3 Total Cache plugin. If you are in a similar situation,
there are three ways to fix the issue:
Disable W3 Total Cache (not recommended because your website’s performance may decrease)
Change the font URLs of Social Pug plugin to HTTPS
In some cases, URL Rewrite rules may cause this issue. Check your .htaccess file
Mixed Content: The page was loaded over HTTPS, but requested an insecure font
I am out of wit as how to solve this problem in Javascript or HTML. I have customers currently using web applications built for ie9 and under. These legacy applications do not work well on IE11. IT solutions was to enable enterprises mode. Enterprises mode was designed to avoid "common compatibility problems associated with web apps written and tested on older versions of Internet Explorer".
See: http://www.eightforums.com/tutorials/43972-ie11-enterprise-mode-enable-disable-users.html
Enabling enterprises mode appear to be problematic on web application written using Bootstrap and AngularJS. Ie, responsive does not work at all unless enterprises mode is disabled. Not just AngularJS and Bootstrap but other libraries as well.
The solution that I am looking for is a way to check the status of enterprises mode via javascript, then tell the users to either enable / disable the mode. Better, if it can be turn off / on automatically via JS or HTML attributes.
Snooping in the document.x and window.x objects, I do not see any properties that we would give me an indication that enterprises mode is enable. Any suggestion?
Repro(s):
IE11 > Developer Tool > Console > Type window
IE11 > Developer Tool > Console > Type document
There is no DOM property that indicates that you're running EMIE. The whole idea of EMIE is to emulate IE8 behavior better than the IE8 document mode emulates IE8 behavior. EMIE should only be used in specific cases where it's needed; it should not be used wholesale.
It is possible to detect EMIE in certain cases. If you look carefully at the list of user-agent strings over the last couple of releases, there's a noticeable difference between EMIE on IE11 and the user agent string for IE11 RTM.
However, before you take that as your magic bullet, there are two caveats:
You cannot disable EMIE programmatically. It's a local configuration change only.
The user agent for IE11 is completely different today than it was when IE11 was released. Based on reports from the IE team, the UA string is going to be even more complicated, especially once "IE Spartan" (or whatever they choose to call it") hits the wire.
My recommendation? Create a small launcher page that does a simple feature detection for the web app in question. If you detect features consistent with what's needed for the app, then display a link to launch the app. If feature detection fails to detect IE8, IE11, or whatever version you've targeted, display a warning with a link to more troubleshooting information. Be sure to include a launch link anyway, just in case.
This way, the user has the information they need and you have a lightweight way of handling the issue, one that doesn't require too many updates to the app in question.
Hope this helps...
-- Lance
To my mind the reason of the issue is that IE 11 Enterprise mode emulates IE 8. But bootstrap doesn't support IE 8. To overcome it just use HTML5 shim and Respond.js as described here.
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.min.js"></script>
But without check like <!--[if lt IE 9]> - because it seems that it doesn't work in the enterprise mode.
The better solution would be not just include the mentioned scripts without conditions but find out the appropriate condition instead of < IE 9.
To fix the problem with angularjs just use the following meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
For those who also struggled with this problem. I have submitted a feature request to MS IE Team.
See:
https://connect.microsoft.com/IE/feedback/details/1159543/need-a-way-for-client-side-codes-to-detect-enterprises-mode
My solution is a workaround that involve checking the width of the container div. Enterprises mode do not support responsive.
We have been facing a weird problem with PDF documents displayed in Safari. This problem is reproducible in many of our machines. The problem is like this..
Adobe Reader has support for hit highlighting in PDF documents when it is being viewed in any browser. For example,
http://www.mysite.com/myfile.pdf#xml=http://www.somesite.com/words.txt
This URL should highlight the words specified in words.txt file. But, unfortunately many of our Safari browsers (on Windows machines) don't highlight any text in opened pdf file. The same URL works fine in rest of the browsers (IE, Firefox and Chrome). I could not figure out where the problem is!
Can anybody please help me on this?
Thanks in advance,
Safari uses a built-in PDF plugin exclusive to safari (even on iPhone)
This is different from the Adobe's plugin and the API is different too.
Most of the things that work with the Adobe plugin won't work with the one inside Safari.
you may be able to find information about forcing Safari to use the Adobe Reader plugin (Google is your friend) but that would be a per user setting, something you cannot control on everybody's machine.
I'm also looking for help on this to control pdf files inside safari using javascript.
Tools like Selenium are good for testing user interactions on the web UI. However, I was curious what are people approaches for strictly testing and verifying that web pages are rendered correctly across a set of browsers?
Is this even possible?
May I recommend browsershots where you can submit pages and have them rendered out in a variety of browsers with various things set on or off such as Flash and JavaScript. At the end of the day you will still want to install FF, IE6-8, Opera and Safari/Chrome for testing manually. Also, if you've got a friend with a Mac (or a PC if you're using a Mac) get them to test in Safari too as I've personally found differences in the way both of them render the same page.
I'd also recommend that you develop mainly in Firefox and regularly check it in IE6 as you work. IE6 is the one that will mostly screw up so if it's working in both it's more likely to be working in all.
When you find rendering weirdness try and fix it in your markup and CSS first before resorting to CSS hacks as they can lead to 'interesting' problems later or in other browsers.
There is only a handful of browsers you need to test, as some share a common rendering engine (Gecko or Webkit). Without explaining which or why, here's the current wisdom (2009):
Build your site using Firefox or Opera (on any platform). BTW Opera uses its own Presto engine;
Test in whichever of the above you didn't use.
Validate the (X)HTML and CSS (important!).
Test it in >=IE7 and note the glitches, if any.
Use conditional comments in separate stylesheets for each version IE - never use CSS hacks as they'll go out of date.
Test in IE <7 if you like and do the same, or use conditional comments to ask users (politely) to upgrade their version of IE.
Test in Safari (Webkit).
Don't test in Chrome, you already have by proxy (Webkit)!
Don't test in IE for Mac - the share is too low and it's no longer updated.
Finally, try enlarging the text in Firefox, Opera, IE and Safari. Opera also has a hand-held emulation mode for mobiles.
You will have now covered (theatrical guess) 99.9% of browser setups. If you're on OS X or Linux, you can run Windows in a virtual environment like Parallels or Wine. Apparently Wine also has a Windows binary, but I couldn't find it. Caution: you'll need to be sure that your virtual environment allows IE to read conditonal comments.
In practice, I find that if a site has valid code and works in Firefox, Safari and Opera, it'll probably be okay in IE7 up. The only HTML/CSS gotcha is IE's 'haslayout' handling. If you don't have the browsers, BrowserStack is an excellent online testing service.
Finally, if you're using Javascript, you'll need to go through a similar process, problem being that as a rapidly developing area, newer versions of some browsers handle Javascript in increasingly effective ways, so functions in older versions might break or fail quietly.
If you just want to see if layout is correct, just submit your website to BrowserShots.org and visit later to see the screenshots.
If you want to test the functionality (JavaScript, etc.) then you'll need to test manually.
Manually?
I do not see an alternative if you want strict testing. Just install as many different browsers as possible and test in all of them. Of course this includes different versions of most popular browsers, and you need to check on Windows, Linux and Macintosh.
Previously I was use WM for different versions of IE, but I find out some new tool for testing layout, and UI as well with this tool, link for FF use fire bug extension, those tools are for manually testing.