Open Bug 1590419 Opened 5 years ago Updated 2 years ago

[Inactive CSS] Add inactive CSS hint for when width does not apply because of max-width

Categories

(DevTools :: Inspector: Rules, enhancement, P3)

enhancement

Tracking

(Not tracked)

People

(Reporter: kumar, Unassigned)

References

(Blocks 1 open bug)

Details

Example scenario

  1. Define a CSS width for an element, such as width: 500px
  2. Load the page
  3. Observe that the width of the element is 100px
  4. Open the inspector to figure out why

What happened?

The inspector shows that width: 500px applied to the element with the correct specificity.

However, a less specific rule, buried among other rules, is setting max-width: 100px.

What should have happened?

The inactive CSS feature should warn that the width is not taking affect because max-width is taking over.

Anything else we should know?

I love the inactive CSS feature! Max-width problems are really hard to figure out sometimes and, although embarrassing, I only figured out what was happening after a stack overflow dive. This case was specific to a React-Bootstrap Popover so of course I assumed it was a higher level configuration problem.

Blocks: 1540753
Summary: Add inactive CSS hint for when width does not apply because of max-width → [Inactive CSS] Add inactive CSS hint for when width does not apply because of max-width
Priority: -- → P3
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.