1607932 - Style hint for "max-width" wrongly triggers on block element

Status: RESOLVED WORKSFORME

(DevTools :: Inspector: Rules, defect)

Description

[Timo Tijhof]

Attachment: capture.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:72.0) Gecko/20100101 Firefox/72.0

Steps to reproduce:

An element has the following styling:

display: block;
content: attr(title);
background: #fff;
color: #252525;
border: 1px solid #a7d7f9;
border-radius: 4px;
padding: 5px 8px;
max-width: 20em;
position: absolute;

Actual results:

The following style hint is triggered on the max-width rule:

max-width has no effect on this element since it has a display of inline.
Try adding display:inline-block or display:block. Learn more.
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width

Expected results:

The element has display: block and position: absolute applied. It seems the absolute position is what causes it to think it is an inline element. I'm unsure whether that is true or not implementation-wise (I thought it made elements behave line an inline-block element).

In any event, the "max-width" rule definitely does work on the element in question. A larger title value causes it to wrap, at 20em, as intended.

Comment 1

[Timo Tijhof]

I'm not sure but the following might be related:
https://bugzilla.mozilla.org/show_bug.cgi?id=253844

Comment 2

[Patrick Brosset <:pbro>]

I have tested this in Firefox 72, 73 and 74, but could not reproduce the problem.
I used the piece of CSS code you provided and created this demo page:

https://jsbin.com/pohucixego/edit?html,css,output

For me the max-width property is always valid.

Could you please check if it works for you with this test page? And if it does, why did it fail for you originally? Did your original test page differ from mine?

Comment 3

[Timo Tijhof]

I created an isolated test case at https://codepen.io/Krinkle/pen/bGNMqbV.

What I found is that it is not strictly triggered by position: absolute; being present.

Rather, what triggers it is that the style rule changes.

1. Load the code pen.
2. Enable the position rule. (The "max-width" style violation now becomes visible.)
3. Re-disable the position rule. (The "max-width" style violation remains visible.)

I can reproduce it in reverse as well, e.g. if position:absolute is already set, then removing it makes the style violation visible, and it remains visible even after re-enabing it.

I can also reproduce it on Patrick's JSBin.

Comment 4

[Timo Tijhof]

Attachment: bug-jsbin.png

Comment 5

[Patrick Brosset <:pbro>]

I'm sorry Krinkle but I still can't reproduce the issue. It works fine for me on your codepen and on my jsbin.
I must be doing something different than you. Could you please list, with all the details, the steps you took to see the bug.
I personally did this:

• open the codepen
• open the inspector
• pick the <span class="cvn-overlay-pagesub cvn-overlay-pagesub--portlet"> element in the inspector
• add the hover pseudo-class to it (right click on the element in the inspector)
• select the ::after pseudo-element that appeared
• inside the Rules panel, disable the position: absolute declaration ==> The max-width property remains valid at this point
• re-enable the position: absolute declaration ==> The max-width property is still valid

Comment 6

[Timo Tijhof]

I didn't know about the "Change Pseudo-class" context menu. I toggled it via the ":hov" menu on the top right of the Rules sidebar in the inspector.

However, either way, I can no longer reproduce this on the codepen, nor on JSBin, nor with the original Wikipedia feature where I first encountered it. A mystery indeed.