New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

icons on results not working in firefox / IE 11 #538

Closed
julie-sullivan opened this Issue Feb 7, 2014 · 6 comments

Comments

Projects
None yet
5 participants
@julie-sullivan
Member

julie-sullivan commented Feb 7, 2014

icons

Looks okay in Chrome

@alexkalderimis

This comment has been minimized.

Contributor

alexkalderimis commented Mar 5, 2014

This is an odd issue. In the firefox inspector you can see that the web-font is requested (from the cdn), and the response headers of this request show that it has ~30kb of font to get. However, the response body is empty. The current cdn serving these requests is a gh-pages page serving static files. Changing back to the older self-hosted cdn fixes the issue completely.

Note that this is a combinatorial issue: gh-pages works fine with chrome, so it is not just the server, but firefox works fine with the nginx served cdn, so it not just the browser. I suspect firefox refuses to complete the request based on some header of the response, but since we can't modify these (served from GH), we can't do much about that. It may therefore be a security standards thing that firefox is stricter about than the rest.

An interim solution is to go back to our own CDN. This still means that we have the responsibility to keep this up. Ways of dealing with this in the future include: use a cloud based cdn (host it on Amazon or some such thing - downside = ongoing costs); leverage existing cdns (such as cloudflare) that already host fontawesome (should be doable - will be a minor change in im-tables); some kind of fail-over mirroring with the mods?; get existing cdns to host our resources (plead "science"?).

For the meantime we will go back to http://cdn.intermine.org though.

alexkalderimis added a commit that referenced this issue Mar 6, 2014

We cannot use gh for woff because of #538
This change 'fixes' #538, but not with any degree of satisfaction.

@joshkh joshkh reopened this Mar 21, 2014

@joshkh

This comment has been minimized.

Contributor

joshkh commented Mar 21, 2014

Re-opening. While the issue is resolved for Firefox, the icons are still missing when viewed in Internet Explorer 11.

@julie-sullivan julie-sullivan changed the title from icons on results not working in firefox to icons on results not working in firefox / IE 11 Mar 25, 2014

@julie-sullivan julie-sullivan modified the milestones: InterMine 1.4, InterMine 1.3.1 release Mar 26, 2014

@chenyian-nibio

This comment has been minimized.

Contributor

chenyian-nibio commented May 27, 2014

Looks like the problem is related to the CORS settings. I don't know how is GitHub pages, but on apache server, adding 'Header set Access-Control-Allow-Origin "*"' in to .htaccess of the CDN directory solved the problem. Some one explained it here http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/ .

@alexkalderimis

This comment has been minimized.

Contributor

alexkalderimis commented May 27, 2014

Hi there Chen,

We encountered this issue some months ago, and would make the following
recommendations:

  • Configure your CDN location to point at your own cdn, or
    cdn.intermine.org. These can be configured with the correct headers,
    but we do not have control over CORS headers on github pages. This
    requires setting the header.cdn.location property for your app. The
    current version of intermine now points to the cdn we run in Cambridge
    due to to this issue. Setting this property will propagate to the
    runtime JS libraries.
  • In the latest version of the tables (3.2.2) you can also set whether
    to use the fontawesome based icons or the older glyphicon icons. For
    maximum compatibility glyphicons are the default, but this can be
    changed by setting intermine.options.Style.icons = "fontawesome" at
    runtime. You can also set the location for the fontawesome and glyphicon
    stylesheets, or indeed load them yourself.

Information about setting these options can be found here:

http://intermine.readthedocs.org/en/latest/webapp/properties/javascript-options/

On 27/05/14 01:52, Chen, Yi-an wrote:

Looks like the problem is related to the CORS settings. I don't know how
is GitHub pages, but on apache server, adding 'Header set
Access-Control-Allow-Origin "*"' in to .htaccess of the CDN directory
solved the problem. Some one explained it here
http://wpvkp.com/font-awesome-doesnt-display-in-firefox-maxcdn/ .


Reply to this email directly or view it on GitHub
#538 (comment).

@julie-sullivan

This comment has been minimized.

Member

julie-sullivan commented Jun 2, 2014

@kkarra Can you confirm this is working correctly now?

@kkarra

This comment has been minimized.

kkarra commented Jun 2, 2014

It is working correctly now.

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