1629107 - inspector css shows wrong rules

Status: RESOLVED WORKSFORME

(DevTools :: Inspector: Rules, defect)

Description

[Ian Goodacre]

Attachment: Screenshot_2020-04-11_04-41-53 - firefox inspector bug.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:73.0) Gecko/20100101 Firefox/73.0

Steps to reproduce:

I opened inspector on a website I am working on, in Firefox 73.0.1 on Linux, to examine css

Actual results:

The inspector shows the elements ok but the related css is sometimes incorrect. The css filename and line number displayed are correct but sometimes the rules in the rule-set are the rules of the next rule-set in the file.

The error is sometimes corrected by reloading the page or closing the tab and re-opening the page in a new tab, but not always.

The elements are reliably affected by the correct css rules, rather than the incorrect rules in the inspector display. Disabling a rule in the displayed rule-set disables the rule in the corresponding position of the actual rule-set. corresponding position in the rule-set.

Expected results:

The correct rule-set should have been displayed.

Comment 1

[Ian Goodacre]

Attachment: Screenshot_2020-04-11_04-43-22 - firefox inspector bug.png

This is the CSS file main.css, with the cursor on the rule-set of the span shown in the screenshot of firefox inspector. The line number is the same as shown in the inspector, but the set of rules in the rule-set are different. The rules the inspector shows are those of the next rule-set in the file. In this case, those of #daily_list span.delete:hover

Comment 2

[Ian Goodacre]

Comment on attachment 9139811 [details]
Screenshot_2020-04-11_04-41-53 - firefox inspector bug.png

This is a screenshot of the inspector panel of Firefox. The selected element is a span. The inspector shows the rule-set for #daily_list span.delete being at line 143 of css file main.css, which is correct, but it shows a single rule in the rule-set: 'cursor: pointer;', which is incorrect. The actual rule-set for #daily_list span.delete contains 12 rules, not 1. The rule shown is actually from the next rule-set in the file.

Comment 3

[Ian Goodacre]

This error doesn't happen only for this one element. I have seen the same sort of error for various elements on the page. Most of the time, all is correct, but this error occurs from some elements, some of the time. Once it happens, it appears to be persistent for that given element. Simple page reloads seem not to correct the fault but sometimes CTRL-Shift-R or closing the tab and opening the page in a new tab does result in a correct display of the CSS rule-set. On the other hand, sometimes it does not.

Comment 4

[Ian Goodacre]

Attachment: Screenshot_2020-04-11_05-01-19 - firefox inspector bug.png

Here is another example. In this case a label is selected. The selector, source file and line number displayed for #daily_list div.summary label are all correct, but the rules in the rule-set are incorrect. This is the first time I have noticed the displayed rules are from elsewhere than the next rule-set in the file.

Comment 5

[Ian Goodacre]

Attachment: Screenshot_2020-04-11_05-01-52 - firefox inspector bug.png

And here is a screenshot of the source CSS file open in vim, with the cursor on the line of the rule-set for #daily_list div.summary label. The line number is 135, as displayed in the inspector, but, as you can see, there is only one rule in this rule set, not the many rules shown in the inspector.

The rules shown in the inspector are from the rule-set for #daily_list span.delete, which is at line 143 in the source file, after an intervening rule-set. So, the rules shown are not always those of the immediately subsequent rule-set.

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 7

[Firefox Bug Husbandry Bot]

Resetting severity to default of --.

Comment 8

[BugBot [:suhaib / :marco/ :calixte]]

The priority flag is not set for this bug.
:gl, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 9

[Firefox Bug Husbandry Bot]

Because this bug's Severity has not been changed from the default since it was filed, and it's Priority is -- (Backlog,) indicating it has has not been previously triaged, the bug's Severity is being updated to -- (default, untriaged.)

Comment 10

[Razvan Caliman [:rcaliman]]

Hi Ian,

Sorry for taking so long to get to this.

If this is still an issue, please help us by providing a reduced test case of a file where this happens consistently. It can help us debug.
In this case, screenshots can't help us because we can't reproduce the DOM and CSS conditions that lead to this bug.

If you were using sourcemaps, can you please try again with the latest version of Firefox Nightly or Developer Edition?
Showing incorrect declarations for CSS Rules may have been a problem with the sourcemapping service that we've fixed recently.

Comment 11

[Ian Goodacre]

Thank you for considering this issue. Much appreciated.

I haven't encountered the bug since reporting it but only because I haven't been looking at such details. I will see if I can reproduce it again and let you know.

I don't have a reduced test case. The fault was encountered on a live site. It seems somewhat intermittent and I don't know what triggers it.

I wasn't using sourcemaps, as far as I know. Some of the javascript was assembled from npm packages using browserify but I was not using the --debug option.

Comment 12

[Razvan Caliman [:rcaliman]]

Thank you, Ian.

I will close this bug for now. If you discover another case where this happens and can share a reduced test case, I'll be happy to reopen and investigate.