CSS Rules Acting Weird...Let Me Explain

Hey Everyone, first time!

Ok, I’m going to try and be concise and to the point. I’ve noticed this over the past week or so, and I really need help.

I use the Inspector daily to develop websites and I typically live in the inspector tool to the left/Rules (CSS) on the right. I started noticing last week that when I hover over any element I’m working on the CSS for and click it, what shows up in the Rules side of the inspector isn’t correct at all. I’ll give you an example. I’m working on the .phone class at the moment. In my mediaqueries doc I have on line 15 this:

Screen Shot 2021-03-02 at 1.22.41 PM

Simple font-size, color, weight. However, when I Cmd + Shift + R on the development location, I get this:

The class is correct, but the CSS is totally wrong. When I click the CSS location in the Rules section it takes me to the Style Editor and in there it doesn’t even recognize the .phone class. The only way I can fix this is to completely quit Firefox on my Mac, clear the cache, history, everything just to make it show properly. Once I go back to the page and check the inspector again, it’s correct.

I’ve already completely dumped Firefox from my Mac, reloaded it, etc. Nothing is working. On Chrome it works perfectly fine, but I’ve always worked in FF. Someone please tell me there’s something silly I’m missing.

Thanks in advance,

  • Stewie

Thanks for posting Stewie.

I don’t see any obvious reason why we would fail to show the correct CSS here. The only thing that comes to mind would be a weird cache issue? Maybe try to make sure “disable cache” is checked in the netmonitor tab?

Can you share a URL where we could try to reproduce the issue?

Oops, sorry about that. The site is http://lemate.artefactdesign.com/. I took a screenshot of my settings below as well.

It is not possible for me to reproduce the issue. In the Rules view I see this using Windows 10 and Firefox 86/Nightly 88 and inspecting the element with the .phone class:

Rules view .phone class

Does it make a difference if you disable source maps?

If it doesn’t, you might try to create a test profile and check whether that makes any difference. If it does, it’s obviously something related to your profile settings.


If the stylesheet you edited was loaded via @import, then it’s probably the same issue as https://bugzilla.mozilla.org/show_bug.cgi?id=1699648

It’s been fixed in FF89 (will be in the next Nightly), and I’ll try to get it uplifted to Beta/DevEdition (FF88)

That makes sense because yes, I am using @import to load 4 of my CSS files. Nice catch Julian! Looking forward to the update!