Had you ever inspected this site before in an earlier version of Firefox where you recall that it worked on your system? In other words, do you think this is a new problem specific to Firefox 44?

I don't see a problem on Windows 7 on a randomly selected condiment (attached screenshot).

Could you reload the page bypassing the cache using Ctrl+Shift+r to make sure all the CSS downloads fresh in case there is a cache corruption issue.

I have inspected this site before on previous versions with success, so it might be an issue with the latest version, only it hasn't been an issue with any other site thus far. Also, I'm running Windows 10. Ctrl+Shift+r didn't work, unfortunately. I even tried re-installing Firefox, but that didn't work either.

Also, I noticed that the Style Editor tab shows that only 1 css file loaded, a very brief file, and it's simply called "css". It also displays an error message saying "Style sheet could not be loaded http://cdn.shopify.com/s/files/1/1033/9635/t/1/assets/timber.scss.css?6052438879326238697".

Maybe this is the issue? https://bugzilla.mozilla.org/show_bug.cgi?id=1084395

Can you load all five CSS files that show in the page source directly via the location/address bar?

myQuil said

I noticed that the Style Editor tab shows that only 1 css file loaded, a very brief file, and it's simply called "css". It also displays an error message saying "Style sheet could not be loaded http://cdn.shopify.com/s/files/1/1033/9635/t/1/assets/timber.scss.css?6052438879326238697".

Maybe this is the issue? https://bugzilla.mozilla.org/show_bug.cgi?id=1084395

That old bug was fixed 10 versions ago, and also you mentioned the styles appear to be applied, so the failure to download isn't the problem. It seems to be more of a parsing issue affecting the Inspector, and I don't know why yours isn't showing you the CSS files.

Are any errors listed in the Console area?

Also, could you test in Firefox's Safe Mode? In Safe Mode, Firefox temporarily deactivates extensions, hardware acceleration, and some other advanced features to help you assess whether these are causing the problem.

If Firefox is not running: Hold down the Shift key when starting Firefox.

If Firefox is running: You can restart Firefox in Safe Mode using either:

• "3-bar" menu button > "?" button > Restart with Add-ons Disabled
• Help menu > Restart with Add-ons Disabled

and OK the restart.

Both scenarios: A small dialog should appear. Click "Start in Safe Mode" (not Refresh).

Any improvement?

If I open page source and click the css links, yes, they all load properly.

In the console, there aren't any errors but there are tons of warnings. Here are a few of them, many are repeats:

Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. theme.scss.css:1:124

Error in parsing value for 'cursor'. Declaration dropped. theme.scss.css:1:944

Unknown property 'user-select'. Declaration dropped. theme.scss.css:1:1210

This is probably important: I just noticed that when I try to click the plus button in the inspector's sidebar to "Add New Rule", nothing happens.

also, safe mode did not work :(

myQuil said

Expected 'none', URL, or filter function but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. theme.scss.css:1:124

Seems that Firefox is loading and parsing the file. I see the same warnings.

Normally, if you were to click the blue linked part on the right, it would take you to the Style Editor section into that style sheet. But... if the style sheet won't load, then presumably that will bomb out in some manner.

How about scripts: does the Debugger section show any scripts from cdn.shopify.com?

scripts are loading in the Debugger section without any problems

Start Firefox in Safe Mode to check if one of the extensions (3-bar Menu button/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem.

• Switch to the DEFAULT theme: 3-bar Menu button/Tools > Add-ons > Appearance
• Do NOT click the Reset button on the Safe Mode start window

• https://support.mozilla.org/kb/Safe+Mode
• https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

cor-el, when I say "safe mode did not work" what I mean is, I was successful in entering safe mode, it simply didn't solve the Payk problem

I just want to reiterate something because I think it might be a key point:

The + button (Add New Rule), under the Rules tab. When I click on it, nothing happens, the Rules section remains blank.

Can you confirm that all style sheets are loaded and that the CSS rules are applied?

Does the DOM Inspector show the rules as being applied?

• DOM Inspector: https://addons.mozilla.org/firefox/addon/dom-inspector-6622/

• https://developer.mozilla.org/DOM_Inspector
• https://developer.mozilla.org/Introduction_to_DOM_Inspector

myQuil said

I even tried re-installing Firefox, but that didn't work either.

I don't know whether you saw the recommendation to rename the program folder before doing the reinstall. In case the updater/installer is not properly replacing potentially broken or conflicting files, that sometimes resolves otherwise inexplicable issues. Here's the whole spiel:

Clean Reinstall

We use this name, but it's not about removing your settings, it's about making sure the program files are clean (no inconsistent or alien code files). As described below, this process does not disturb your existing settings. Do NOT uninstall Firefox, that's not needed.

(A) Download a fresh installer for Firefox 44.0.2 from https://www.mozilla.org/firefox/all/ to a convenient location. (Scroll down to your preferred language.)

(B) Exit out of Firefox (if applicable).

(C) Rename the program folder as follows:

(32-bit Firefox on 64-bit Windows)

C:\Program Files (x86)\Mozilla Firefox

to

C:\Program Files (x86)\OldFirefox

(Other systems)

C:\Program Files\Mozilla Firefox

to

C:\Program Files\OldFirefox

(D) Run the installer you downloaded in step (A). It should automatically connect to your existing settings.

Will the Inspector work properly in a cleanly reinstalled Firefox?

Note: Some plugins may exist only in that OldFirefox folder. If something essential is missing, look in these folders:

• \OldFirefox\Plugins
• \OldFirefox\browser\plugins

I fixed the problem by going into AppData -> Roaming -> Mozilla -> Firefox -> Profiles

Then, the profile folder <randomCharacters>.default was renamed, and a new empty folder was created with the original profile name.

The problem occurs due to just one file:

AppData/Roaming/Mozilla/Firefox/Profiles/.default/SiteSecurityServiceState.txt

Either delete this file, or remove any lines that are related to the site in question (in my case, Shopify), and the CSS should display again.

I have just encountered this problem for the site http://www.wylye-valley-dfas.nadfas-wessex-area.org/. The solution above does not work. The Style Editor show the correct css file loaded with all rules. The Console shows no errors. The page looks correct. The Rules panel shows rules for the html tag but blank for all others.

What could be the cause?

It actually seems to work for anything outside of the <body> tag. Still not sure what's causing the problem, but I figured it's worth mentioning.

Hi perkin5, could be a problem with parsing the @media rules, but that's just a guess and it could be anything. Do you want to file a bug on it?

https://bugzilla.mozilla.org/enter_bug.cgi

There is a "Component" for Developer Tools: Inspector that you can list it under.

Hi myQuil, the file you deleted stores certain rules for secure connections (HSTS, HPKP, possibly others), so that will be relevant to some sites, but apparently not this particular one.