Closed
Bug 1503219
Opened 6 years ago
Closed 6 years ago
Flexbox highlighter overlay is shifted to right on external monitor in some circumstances
Categories
(DevTools :: Inspector, defect, P3)
DevTools
Inspector
Tracking
(Not tracked)
RESOLVED
DUPLICATE
of bug 1509071
People
(Reporter: mbalfanz, Assigned: miker)
References
(Depends on 1 open bug, Blocks 1 open bug)
Details
Attachments
(3 files)
The flexbox highlighter seems shifted to the right when working with form elements.
STR:
- visit data:text/html;charset=utf-8,<div><label>test</label><input></div><style>div{display: flex;}</style>
- enable the highlighter for `div`
AR: see screenshot, highlighter is in wrong position
ER: highlighter should be in its place
Comment 1•6 years ago
|
||
Thanks for filing. I did not manage to reproduce so far. I will try again later. Maybe there's a certain screen size that is needed. Or maybe this needs to be in an iframe or something?
It's looking like this is related to the recent changes we did on supporting rtl, scrolling, writing-mode, and css transform.
Reporter | ||
Comment 2•6 years ago
|
||
I can only reproduce it on my external 27" screen, thought the browser size doesn't seem to matter. On the internal MacBook screen all is correct.
Comment 3•6 years ago
|
||
Update: this does not only happen on form elements, but it does happen only when using an external monitor.
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
Priority: -- → P2
Comment 4•6 years ago
|
||
I just tested this on windows 10 with an external monitor, and I could not reproduce the issue. I'm going to try a few more things and report back.
Comment 5•6 years ago
|
||
I tested on macOS with an external monitor, but could not reproduce the issue either.
The monitor is a 27'' 4K, and I tested with all resolutions that the mac's system preference would let me use.
I'm going to take myself off of this bug for now since I can't repro, and prioritize this down to P3 for now. We should change this back as soon as someone else manages to reproduce this.
Assignee: pbrosset → nobody
Status: ASSIGNED → NEW
Priority: P2 → P3
I was able to reproduce this on Ubuntu 18.10 x64 65.0a1
Build ID: 20181108100100
It was on my secondary monitor, non 4K resolution.
Assignee | ||
Comment 7•6 years ago
|
||
Since the transform rewrite I can't reproduce this issue but I do get a different issue (attached).
It seems that when a flex item is a div getBoxQuads returns the p1.x and p1.y of the content box and the p3.x and p3.y of the border box. This leads to the highlight being slightly out when a flex item that is not a div has a border.
We should fix this on the platform side so I need to create a test case containing a bunch of different node types.
Assignee: nobody → mratcliffe
Status: NEW → ASSIGNED
Reporter | ||
Comment 8•6 years ago
|
||
I'm still able to reproduce the issue, but now it only for bigger window sizes (far from being full screen on the 27" 4k screen though).
See the video attached: at first, the highlighter is placed as expected. After resizing the window, the first highlighter on the logo has a misplaced pattern, the second example shows this behavior towards the avatar image.
Reporter | ||
Comment 9•6 years ago
|
||
@Mike I was just about to file this one. You can test the same problem when highlighting the Bugzilla header, all boxes seem to be shifted by a few px.
Assignee | ||
Comment 10•6 years ago
|
||
I think this is fixed by bug 1505578 but I need to land that before we check.
Assignee | ||
Comment 11•6 years ago
|
||
@Martin Can you test this on the latest nightly?
Flags: needinfo?(mbalfanz)
Reporter | ||
Comment 12•6 years ago
|
||
I can still reproduce the issue with a browser innerWidth wider than something around 2000px. It might be related to the max canvas size we use for highlighters.
Flags: needinfo?(mbalfanz)
Assignee | ||
Comment 13•6 years ago
|
||
I can't reproduce this but it seems like the cause is the canvas itself moving around... in this case whilst still drawing the highlight.
Bug 1509071 should fix this.
Assignee | ||
Updated•6 years ago
|
Assignee: mratcliffe → nobody
Status: ASSIGNED → NEW
Comment 14•6 years ago
|
||
--> Clarifying title for accuracy per comment 3, in the interest of making the list of open blockers of meta bug 1470379 make more sense.
(It sounds like this is roughly a duplicate [or a specific instance] of the more general devtools-highlighter bug 1509071.)
Summary: Flexbox highlighter shifted to right on form elements → Flexbox highlighter overlay is shifted to right on external monitor in some circumstances
Updated•6 years ago
|
Assignee | ||
Updated•6 years ago
|
Assignee: nobody → mratcliffe
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•