Fixed overlay position bug
Brian Vaughn committed
Feb 16, 2019 at 08:33 UTC
c4d6fdbfdbc13885d9abcd493d16bfb607e8f373
1 file changed
+11
-5
src/backend/views/Overlay.js
+11
-5
@@ -15,7 +15,7 @@ type Rect = {
15
// because it highlights elements in the main Chrome window (outside of devtools).
16
// The colors below were chosen to roughly match those used by Chrome devtools.
17
export default class Overlay {
18
- win: Object;
18
+ window: window;
19
container: HTMLElement;
20
node: HTMLElement;
21
border: HTMLElement;
@@ -26,8 +26,14 @@ export default class Overlay {
26
dimSpan: HTMLElement;
27
28
constructor() {
29
- const doc = window.document;
30
- this.win = window;
29
+ // Find the root window, because overlays are positioned relative to it.
30
+ let currentWindow = window;
31
+ while (currentWindow !== currentWindow.parent) {
32
+ currentWindow = currentWindow.parent;
33
+ }
34
+
35
+ const doc = currentWindow.document;
36
+ this.window = currentWindow;
37
this.container = doc.createElement('div');
38
this.node = doc.createElement('div');
39
this.border = doc.createElement('div');
@@ -93,7 +99,7 @@ export default class Overlay {
99
if (node.nodeType !== Node.ELEMENT_NODE) {
100
return;
101
}
96
- const box = getNestedBoundingClientRect(node, this.win);
102
+ const box = getNestedBoundingClientRect(node, this.window);
103
const dims = getElementDimensions(node);
104
105
boxWrap(dims, 'margin', this.node);
@@ -133,7 +139,7 @@ export default class Overlay {
139
height: box.height + dims.marginTop + dims.marginBottom,
140
width: box.width + dims.marginLeft + dims.marginRight,
141
},
136
- this.win
142
+ this.window
143
);
144
assign(this.tip.style, tipPos);
145
}