Ben Leggiero Ben Leggiero - 1 year ago 52
CSS Question

Why is this page purple in Chrome, but blue in Firefox?

I got this as close to a true SSCCE as I could while still replicating the issue:

<!DOCTYPE html>
<html class="colored-bg">
<title>Firefox CSS Priority Test</title>
<link rel="stylesheet" id="_switchSheetBackup" href="//"/>
<link rel="stylesheet" id="_switchSheet" href="//"/>

This page should have a purple background, not a blue one.
<a href="#" class="inverse button">This should have purple text.</a>

Live Example

As you can see, the first stylesheet is a backup in case the second stylesheet doesn't load or takes awhile to load (This is my way if implementing minimal-JS site theming, so when a style is changed, the user doesn't see a noticeable flicker). The intended result is that the page is purple if all stylesheets load properly.

This works great in Chrome and Edge browsers, but not in Firefox. The weird thing is that it's just the background coloring; other classes like
inverse button
(which makes a white button with colored text) work as intended! Is there a quirk or unsupported feature in Firefox that causes this? Most importantly, How do I fix this?

Also, I tried minimizing the code further but couldn't replicate this weird behavior.

Answer Source

The rule on line 33 of visual_Clean_Purple.php is breaking the CSS in Firefox. Try removing:


BoltClock offers a good explanation in this answer:

Firefox appears to simply not understand ::selection (hence necessitating the vendor-prefixed ::-moz-selection), so it ignores the entire rule on encountering an unrecognized selector per the spec.

The common workaround for a browser not understanding one or more selectors in a group is to split/duplicate the rule set.


In fact, in this case it's the only thing you can do, i.e. you will have to put up with this slight bit of bloat.