Search code examples
javascriptcssparsingstylesheetprefixfree

PrefixFree.js is loading additional "phantom" styles on my page


I've been using the excellent PrefixFree on all my sites recently, and in general it works like a charm. But today I discovered a very, very strange issue - on only a few pages of my site, when the script is present, an additional set of styles get loaded that conflict with the rest of the styles on the page and completely mess up the layout.

I cannot determine where these additional styles are coming from - they are not part of any of the stylesheets that I'm linking to on these particular pages. If I remove PrefixFree from the page or comment it out, they disappear immediately and everything displays correctly again.

As I understand it, PrefixFree works by looking for <link> and <style> elements on the current page and parsing them. So how on earth can it be causing additional styles to apply to the page that don't otherwise exist??


Solution

  • Ah ha! I discovered that the pages with the "phantom" styles were referring to two stylesheets that no longer exist. I removed the references to those stylesheets and now the pages display correctly, with the script still in place.

    On the one hand, that solves the problem; on the other, I still have no idea where those extra styles were coming from. They weren't part of the stylesheets that were removed, so it's not even like the script was acting off of cached copies or anything. I still can't find any trace of those styles anywhere across my site.

    Bizarre, but I'll consider this solved since it does fix my problem!