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

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.

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.

Update: this does not only happen on form elements, but it does happen only when using an external monitor.

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.

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.

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.

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.

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.

@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.

I think this is fixed by bug 1505578 but I need to land that before we check.

@Martin Can you test this on the latest nightly?

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.

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.

--> 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.)