duckfly-tw / ie7-js

A JavaScript library to make MSIE behave like a standards-compliant browser.
http://code.google.com/p/ie7-js
0 stars 0 forks source link

font-face declarations with relative urls are broken #265

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
What steps will reproduce the problem?
1. Include IE8.js on a page with Typekit enabled
2. Browse to the url in IE6 and notice that fonts load and then are replaced 
with their fallback fonts (make sure the cache is cleared)

What is the expected output? What do you see instead?

Use fiddler to see that it makes an invalid request for the font file on the 
site's hosted domain.

What version of the product are you using? On what operating system?
HEAD ie7js, Windows XP IE6

Please provide any additional information below.

This is incorrect, it will break all relative urls in the font-family 
definition:
http://code.google.com/p/ie7-js/source/browse/trunk/src/ie7-css.js#335

Original issue reported on code.google.com by m...@typekit.com on 7 Jul 2010 at 6:49

GoogleCodeExporter commented 9 years ago
Also here is an example of it in the wild:

http://getsatisfaction.com/typekit/topics/ie7_javascript_clashes_with_typekit_ja
vascript?utm_content=topic_link&utm_medium=email&utm_source=reply_notification

Original comment by m...@typekit.com on 7 Jul 2010 at 6:55

GoogleCodeExporter commented 9 years ago
Another easy to reproduce example is to use one of google's web fonts via the 
API call, e.g.
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' 
rel='stylesheet' type='text/css'>
The resulting CSS code uses absolute URLs, so the problem is not limited to 
relative ons.

IEx.js goes on to kill the (at first) successful font declaration.

Original comment by cheweym...@gmail.com on 18 Aug 2010 at 10:38

GoogleCodeExporter commented 9 years ago
Ah, sorry, my comment above is not entirely correct:
It works fine if the font is loaded via the <link> tag as in my comment.

However, loading the exact same stylesheet via an @include(URL)  rule from 
another CSS file leads to the successful font declaration being overwritten by 
at least 
IE8.js and IE9.js: I can see the correct font flash for a moment before it is 
gone 
again.

Original comment by cheweym...@gmail.com on 23 Aug 2010 at 8:23

GoogleCodeExporter commented 9 years ago
I'm having the same problem, using IE9.js. I tried the solution posted over at 
the Typekit issue tracker but couldn't get it to work with IE9.js. Looking for 
a solution to use IE9.js and Typekit on the same page.

Original comment by migro...@gmail.com on 10 Nov 2010 at 11:03

GoogleCodeExporter commented 9 years ago
I'm having the same issue regarding IE8.js and google font api

http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js

i tryed both the @import and  a <link> tag

Original comment by jonatha...@gmail.com on 12 Dec 2010 at 1:25

GoogleCodeExporter commented 9 years ago
I can confirm this issue still exists...

Original comment by t...@swaptitude.com on 29 Mar 2011 at 9:33

GoogleCodeExporter commented 9 years ago
I have a similar problem here. IE8 & 7 crashes when the font-face is in the 
css. When I remove the property, the page works as usual. :(

Original comment by nicksnic...@gmail.com on 27 Jun 2011 at 10:49

GoogleCodeExporter commented 9 years ago
I confirm this issue also.

Here is the fix what I did:

<!--[if !IE]> -->
        <style>
        @font-face { 
          font-family: "rokkit";
          src: url("../fonts/Rokkitt-Regular.ttf"); 
          format("truetype"); 
        }

        @font-face { 
          font-family: "rokkitbold";
          src: url("../fonts/Rokkitt-Bold.ttf"); 
          format("truetype"); 
        }

        @font-face { 
          font-family: "opensans";
          src: url("../fonts/OpenSans-Regular.ttf"); 
          format("truetype"); 
        }
        </style>
        <!-- <![endif]-->

Original comment by petteri....@gmail.com on 22 Dec 2011 at 8:55

GoogleCodeExporter commented 9 years ago
I'm having this issue with IE9.js also, and I can't find a solution for that 
version. I was given one for IE7.js, but that doesn't help me.

Original comment by justin.h...@gmail.com on 5 Nov 2012 at 7:45

GoogleCodeExporter commented 9 years ago
on the source code (2.1beta4, IE9.js):
Commenting the lines from 943 to 946 apparently fixes the problem.

    /*this.cssText = cssText.replace(/@charset[^;]+;|@font\-face[^\}]+\}/g, function(match) {
      declarations += match + "\n";
      return "";
    });*/

Original comment by adwo...@energyhousedigital.com on 26 Nov 2012 at 5:40

GoogleCodeExporter commented 9 years ago
      // fix for typekit 
      if(styleSheets[i].href.indexOf('typekit') >= 0) {
        return;
      }

Original comment by jake.str...@gmail.com on 7 Mar 2013 at 7:17

GoogleCodeExporter commented 9 years ago
[deleted comment]
GoogleCodeExporter commented 9 years ago
Using IE9.js 2.1beta4, inserting this code after line 779 worked for me:

      // fix for typekit 
      if(styleSheets[i].href.indexOf('typekit') >= 0) {
        return;
      }

Original comment by kevin.an...@gmail.com on 25 Mar 2013 at 5:06