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

Question

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

<!DOCTYPE html>
<html class="colored-bg">
<head>
  <title>Firefox CSS Priority Test</title>
  <link rel="stylesheet" id="_switchSheetBackup" href="//Shared.BHStudios.org/_css/visual_Clean_Blue.css"/>
  <link rel="stylesheet" id="_switchSheet"       href="//Shared.BHStudios.org/_css/visual_Clean_Purple.php"/>
</head>

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

^{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.

Please accompany any downvotes with a comment telling me why my question is unclear, not useful, or poorly-researched, so I don't make the same mistake again. — Ky -, Jun 21 '16 at 03:48

score 4 · Accepted Answer · edited May 23 '17 at 12:33

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

*::selection,

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.

Ah, I see! Weird that it still requires a prefix after all this time! — Ky -, Jun 21 '16 at 04:02

score 2 · Answer 2 · edited Jun 21 '16 at 05:01

2

You are using a CSS selector that Firefox doesn't yet support (*::selection) in visual_Clean_Purple.php which stops the css selector from being interpreted.

I removed that selector and it works: https://plnkr.co/edit/d0eXisEaAqwvmF4cZL5f?p=preview

edited Jun 21 '16 at 05:01

Ky -

30,724
51
192
308

answered Jun 21 '16 at 03:52

Gayathri Mohan

2,924
4
19
25

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

2 Answers2