Why is this page purple in Chrome, but blue in Firefox?
source link: https://www.codesd.com/item/why-is-this-page-purple-in-chrome-but-blue-in-firefox.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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">
<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>
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.
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK