diff --git a/devtools/server/actors/highlighters/flexbox.js b/devtools/server/actors/highlighters/flexbox.js
index 0c9a82a84ea4..77ae1c0486b1 100644
--- a/devtools/server/actors/highlighters/flexbox.js
+++ b/devtools/server/actors/highlighters/flexbox.js
@@ -682,6 +682,14 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
     const containerBounds = containerQuad.getBounds();
     const { width: containerWidth, height: containerHeight } = containerBounds;
 
+    const offset = (getDisplayPixelRatio(this.win) / 2) % 1;
+    const zoom = getCurrentZoom(this.win);
+    const canvasX = Math.round(this._canvasPosition.x * this.win.devicePixelRatio * zoom);
+    const canvasY = Math.round(this._canvasPosition.y * this.win.devicePixelRatio * zoom);
+
+    this.ctx.save();
+    this.ctx.translate(offset - canvasX, offset - canvasY);
+
     for (const flexLine of this.flexData.lines) {
       const { crossStart, crossSize } = flexLine;
       let mainStart = 0;
@@ -744,6 +752,8 @@ class FlexboxHighlighter extends AutoRefreshHighlighter {
           break;
       }
     }
+
+    this.ctx.restore();
   }
 
   _update() {