Skip to content

Issue when using element queries in Firefox with Typekit #117

Closed
@fchristant

Description

@fchristant

First of all, amazing library!

I'd like to report a pretty specific issue where element queries fails for me in Firefox when using Typekit. Here's the relevant part of my head section:

    <link rel="stylesheet" type="text/css" href="<?= $base ?>assets/css/main.css" crossorigin="anonymous" />

    <script src="../src/js/head/ResizeSensor.js"></script>
    <script src="../src/js/head/ElementQueries.js"></script>

    <script src="//use.typekit.net/lib.js"></script>
    <script>try{Typekit.load({async:true});}catch(e){}</script>

    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster&&effect=canvas-print" crossorigin="anonymous">

I've anonymized the above code somewhat, since it uses a paid typekit subscription. I'm getting this error in the Firefox console:

InvalidAccessError: A parameter or an operation is not supported by the underlying object

This would be a typical CORS error when the library tries to read CSS rules from an external stylesheet. I've narrowed it down to the typekit stylesheet throwing the issue, which is a CSS that is dynamically fetched by the typekit JS. For the record, the response from typekit does allow all domains, so it is strange that the error occurs in the first place. It's equally strange that the Google web fonts request does not have this issue.

I'm fine though that the typekit CSS rules are not read, the problem is that it blocks the working of the whole EQ lib altogether. I basically want EQ to apply to my main.css only, and don't care about the failure in reading any other CSS files.

Is there a way to do that? Or perhaps a way for the lib to be more robust in that when it fails, it just moves on to the next CSS with success?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions