Pop-up styling does not work if @font-face is first thing in stylesheet

Confirmed Issue #12592238 • Assigned to Steven K.


Jason B.
Jul 1, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Given this pop-up HTML file:

    <link rel="stylesheet" href="styles.css"/>
<body id="stylish-popup">

And this CSS:

@font-face {
    font-family: 'RobotoLtRegular';
    src: url('chrome-extension://__MSG_@@extension_id__/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
* { background-color: red;}

And the attached font file…

The CSS to turn the background red does not work when you open the pop-up. If you add anything (even a comment) before @font-face, then it works.


1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

    Changed Status to “Confirmed”

  • Hi,

    Can you provide a complete repro for this?  I am not able to reproduce what I believe you are reporting, I.e. that I should not be able to see the red background in the pop-up if I have @font-face as the first line in the popup’s CSS file?

    Do you see this same behavior in a regular HTML file, I.e. not inside of an extension?

    Thank you,

    The MS Edge Team

  • It was happening, I was chopping down my extension to provide a minimal test case, then Edge started crashing every time I tried to open the pop-up, then it stopped happening even with the full extension.

    If I can figure out what makes it happen, I will update.

  • Thank you for the update.  Please do let us know if you get more information on this.

    Appreciate the support,

    The MS Edge Team

You need to sign in to your Microsoft account to add a comment.

Sign in