Skip to content

Commit

Permalink
Fix detection of mispositioned fixed tooltips on Chrome
Browse files Browse the repository at this point in the history
FIX: Fix a bug that caused tooltips in the default configuration to be positioned
incorrectly on Chrome when the editor was transformed.

Closes codemirror/dev#1284
  • Loading branch information
marijnh committed Oct 24, 2023
1 parent 0de3727 commit 1387c81
Showing 1 changed file with 17 additions and 6 deletions.
23 changes: 17 additions & 6 deletions src/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
}
tooltipView.dom.style.position = this.position
tooltipView.dom.style.top = Outside
tooltipView.dom.style.left = "0px"
this.container.appendChild(tooltipView.dom)
if (tooltipView.mount) tooltipView.mount(this.view)
return tooltipView
Expand All @@ -241,12 +242,22 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
let editor = this.view.dom.getBoundingClientRect()
let scaleX = 1, scaleY = 1, makeAbsolute = false
if (this.position == "fixed" && this.manager.tooltipViews.length) {
// When the dialog's offset parent isn't the body (Firefox) or
// null (Webkit), we are probably in a transformed container,
// and should use absolute positioning instead, since fixed
// positioning inside a transform works in a very broken way.
let {offsetParent} = this.manager.tooltipViews[0].dom
makeAbsolute = !!(offsetParent && offsetParent != this.container.ownerDocument.body)
let {dom} = this.manager.tooltipViews[0]
if (browser.gecko) {
// Firefox sets the element's `offsetParent` to the
// transformed element when a transform interferes with fixed
// positioning.
makeAbsolute = dom.offsetParent != this.container.ownerDocument.body
} else {
// On other browsers, we have to awkwardly try and use other
// information to detect a transform.
if (this.view.scaleX != 1 || this.view.scaleY != 1) {
makeAbsolute = true
} else if (dom.style.top == Outside && dom.style.left == "0px") {
let rect = dom.getBoundingClientRect()
makeAbsolute = Math.abs(rect.top + 10000) > 1 || Math.abs(rect.left) > 1
}
}
}
if (makeAbsolute || this.position == "absolute") {
if (this.parent) {
Expand Down

0 comments on commit 1387c81

Please sign in to comment.