Open Bug 1509071 Opened 2 years ago Updated 2 years ago

Canvas based highlighters can become misaligned under certain circumstances

Categories

(DevTools :: Inspector, enhancement, P2)

enhancement

Tracking

(Not tracked)

People

(Reporter: miker, Unassigned)

References

Details

Under certain circumstances canvas based highlighters can become misaligned e.g. if you make the window small or even if you collapse a section of a page.

It feels like the canvas position somehow gets out of sync.

At the moment we draw a canvas 4096 x 4096 and move it when we need to so as to keep it overlaying the screen. In the original canvas bug we were told that drawing a canvas that size isn't going to be very performant.

It would make a lot more sense to overlay only the viewport with a canvas and set it as position: fixed.

We could then either use the absolute coordinates relative to the page or change the canvas origin on scroll using:

this.ctx.translate(-scrollX, -scrollY)

This would give us some advantages:

- We could always use the absolute coordinates of items without worrying about offsets.
- Because even a 4K screen is only 3840 x 2160 the smaller canvas would give us a performance boost.
- We would never have to worry about moving the canvas onscroll because it always covers the whole viewport.

Of course, we should wait until we are not so busy in order to do this although it would fix the issue with the canvas getting out of sync.
Duplicate of this bug: 1503219
You need to log in before you can comment on or make changes to this bug.