MS Edge Iframe CSS

Question

I am building cross browser extension and I am using jQuery to create iframe in document:

$iframe = $("<iframe/>");

$iframe.on("load", function () {
    var font = browser.runtime.getURL("css/font.css");
    var style = browser.runtime.getURL("css/style.css");

    // on safari I use window.safari.extension.baseURI + path

    $iframe.contents().find("head").append([
        "<link href='"+font+"' rel='stylesheet' type='text/css'/>",
        "<link href='"+style+"' rel='stylesheet' type='text/css'/>",
    ]);
});

$iframe.appendTo("html");

This works in browsers: Chrome,Firefox,Safari,Opera but doesn't work in MS Edge. The iframe is created, content is injected. But the style is not being applied to iframe content. This happens only in MS Edge.

What could be wrong?

Answer 1

After thorough research I was able find that there is an issue with IE and MS Edge dynamic stylesheet loading, and when creating "link" element it's "href" attribute should bee added last.

However after many unsuccessful tries, I was able to find solution that worked for me (Note that href attribute has to be indeed the last one):

$iframe.contents().find("head").append([
    $("<link rel='stylesheet' type='text/css' href='"+font+"'/>"),
    $("<link rel='stylesheet' type='text/css' href='"+style+"'/>")
]);

I have no idea why it works this way.