If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

Area information is displayed way higher than the box is placed when tilting the grid at different angles

NEW
Unassigned

Status

()

Firefox
Developer Tools: Inspector
P3
minor
19 days ago
14 days ago

People

(Reporter: bogdan_maris, Unassigned)

Tracking

(Blocks: 1 bug)

Trunk
Points:
---

Firefox Tracking Flags

(firefox55 unaffected, firefox56 affected, firefox57 affected)

Details

Attachments

(1 attachment)

Created attachment 8904926 [details]
Screenshot showing the issue

[Affected versions]:
- Latest Nightly 57.0a1
- Beta 56.0b9

[Affected platforms]:
- Ubuntu 16.04 64bit
- Windows 10 64bit
- macOS 10.12.6

[Steps to reproduce]:
1. Go to https://stripe.com/connect
2. Open Inspector Grid (Ctrl+Shift+C or Cmd+Alt+C)
3. From Inspector - Layout select the third Overlay Grid ('div.stripes')
4. Scroll down the page in Layout and select a box from the middle of grid outline

[Expected result]:
- Area information is displayed near the selected box.

[Actual result]:
- Area information is displayed way higher than the box is placed.

[Regression range]:
- This is not a regression because it's reproducing even on Nighlty from 2017-06-20 when grid outline was first available in Layout.

[Additional notes]:
- Not sure if there is a bug logged for this already, I checked a little bit but could not find one.
- Altering the angle (I changed to -32deg) of the grid will keep the area info way higher and out of sight. It will actually be on the same line as the higher corner of the box.
Thanks for filing.

(In reply to Bogdan Maris, QA [:bogdan_maris] from comment #0)
> - Altering the angle (I changed to -32deg) of the grid will keep the area
> info way higher and out of sight. It will actually be on the same line as
> the higher corner of the box.
Yeah, I think this was expected. Handling CSS transforms in the CSS Grid highlighter has been a complex piece of work and we've done it for the lines/cells/areas themselves but not for the "info bar".

I would not consider this a blocker, but rather a minor bug.

Matteo, perhaps you can explain the technical solution that one would have to implement to fix this.
Flags: needinfo?(zer0)
Priority: -- → P3
Just to confirm: "Area information" is what we usually call the "info bar" in DevTools.
I was referring to the bubble where the box coordinates are written.
Severity: normal → minor
(In reply to Patrick Brosset <:pbro> from comment #1)
> Thanks for filing.
> 
> (In reply to Bogdan Maris, QA [:bogdan_maris] from comment #0)
> > - Altering the angle (I changed to -32deg) of the grid will keep the area
> > info way higher and out of sight. It will actually be on the same line as
> > the higher corner of the box.
> Yeah, I think this was expected. Handling CSS transforms in the CSS Grid
> highlighter has been a complex piece of work and we've done it for the
> lines/cells/areas themselves but not for the "info bar".
> 
> I would not consider this a blocker, but rather a minor bug.
> 
> Matteo, perhaps you can explain the technical solution that one would have
> to implement to fix this.

This is actually not a bug, it works as intended: the infobar is positioned considering the box of the element. And the box's top, where the infobar is positioned, is where the topmost quad's point is (in the screenshot, the top right corner, where "3" is displayed).
Notice that this is not a behavior of the grid per se, it's a behavior of the infobar. Open this URL on a tab, and inspect the DIV:

data:text/html,<div style="background:red; position: absolute; top: 100px; left:100px; width: 200px; height: 150px;transform:skewY(-32deg)"></div>

This is also consistent with other browsers like Chrome; so personally I would set this bug as wontfix.
Flags: needinfo?(zer0)
You need to log in before you can comment on or make changes to this bug.