1691924 - Margin wrongly highlighted when transform rotate applied (Firefox Developer Tools)

Status: UNCONFIRMED

(DevTools :: Inspector, defect, P3)

Description

[Paolo Božac]

Attachment: highlight_bug.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

Steps to reproduce:

Added margin and transform rotate on one element and tried highlighting it in Firefox Developer Tools.

Minimal setup where the bug can be reproduced: https://codesandbox.io/s/festive-galileo-16cr2?file=/index.html

Actual results:

Margin is correctly applied in the browser itself but it's wrongly highlighted in the Firefox Developer Tools.

Expected results:

It should highlight margin where it's actually applied.

Comment 1

[Julian Descottes [:jdescottes]]

Thanks for filing a bug with a test case!

You are correct, we should not in theory apply the node transformation matrix to the margin highlighter.

But I think that highlighting the margin in the correct spot could also be confusing, as it might overlay the rest of the boxmodel, or feel totally disconnected from it.

Will add some examples.

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: marginleft_rotate45.png

Similar example as in the summary, just used a bigger margin, and switched to a rotate 45.

Comment 3

[Julian Descottes [:jdescottes]]

Attachment: margin_rotate45.png

same example, but with margin on all sides

Comment 4

[Julian Descottes [:jdescottes]]

Attachment: margin_translate_rotate

Last example, with an additional translate

Comment 5

[Julian Descottes [:jdescottes]]

Also a note on the implementation, the box-model highlighter relies on getBoxQuads({ region }) to retrieve the coordinates of the areas to highlight.

For transformed elements, getBoxQuads({ region: "margin" }) returns transformed coordinates. If we decide to change this, the actual change will probably need to happen in the getBoxQuads implementation.

Before going to that, I'm still not sure what is the best representation for the margin of a transformed element.
Martin: by any chance do you remember any prior discussion about this topic?

Comment 6

[Martin Balfanz [:mbalfanz]]

Attachment: box+transform.png

I don't remember any prior discussion.

Looking at this, I agree that we should show the box-model highlighter in the correct position. I see your point that it can be confusing, but this is what we have a transform highlighter for. I wonder if we could show this by default for transformed elements?

Comment 7

[Julian Descottes [:jdescottes]]

Thanks for the feedback Martin!

I agree with your suggestion. If we can somehow always show the transform highlighter on top of the box-model highlighter for transformed elements, we could keep the margin at the right place. This should make it easy to understand for users.