service.js

@@ -312,8 +312,9 @@ class BesService {
    */
   onScroll() {
     this.dismissPopup()
-    this.canvasPanel.style.top = `${-this.hostElement.scrollTop}px`
+    // Scroll panel is "position: absolute", we need to keep it aligned with the host element.
-    this.canvasPanel.style.left = `${-this.hostElement.scrollLeft}px`
+    this.scrollPanel.style.top = `${-this.hostElement.scrollTop}px`
+    this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px`
 
     if (this.hostElement !== this.textElement) {
       this.textElement.scrollTop = this.hostElement.scrollTop
@@ -335,6 +336,7 @@ class BesService {
    */
   onResize() {
     this.setCorrectionPanelSize()
+    this.repositionAllMarkup()
     if (this.eventSink && 'resize' in this.eventSink)
       this.eventSink.resize(this)
   }
@@ -360,9 +362,9 @@ class BesService {
    */
   addMistakeMarkup(match) {
     const range = match.range
-    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
+    const scrollPanelRect = this.scrollPanel.getBoundingClientRect()
-    const scrollX = canvasPanelRect.left
+    const scrollX = scrollPanelRect.left
-    const scrollY = canvasPanelRect.top
+    const scrollY = scrollPanelRect.top
     match.highlights = Array.from(range.getClientRects())
     if (match.highlights.length === 0) return
     const dpr = window.devicePixelRatio
@@ -840,23 +842,24 @@ class BesService {
    * Creates auxiliary DOM elements for text adornments.
    */
   createCorrectionPanel() {
-    this.panelParent = document.createElement('div')
+    const panelParent = document.createElement('div')
-    this.panelParent.classList.add('bes-correction-panel-parent')
+    panelParent.classList.add('bes-correction-panel-parent')
 
     this.correctionPanel = document.createElement('div')
     this.correctionPanel.classList.add('bes-correction-panel')
 
+    this.scrollPanel = document.createElement('div')
+    this.scrollPanel.classList.add('bes-correction-panel-scroll')
+
     this.canvasPanel = document.createElement('canvas')
     this.canvasPanel.classList.add('bes-canvas')
     this.ctx = this.canvasPanel.getContext('2d')
     this.ctx.scale(1, 1)
 
-    this.panelParent.appendChild(this.correctionPanel)
+    panelParent.appendChild(this.correctionPanel)
-    this.correctionPanel.appendChild(this.canvasPanel)
+    this.correctionPanel.appendChild(this.scrollPanel)
-    this.textElement.parentElement.insertBefore(
+    this.scrollPanel.appendChild(this.canvasPanel)
-      this.panelParent,
+    this.textElement.parentElement.insertBefore(panelParent, this.textElement)
-      this.textElement
-    )
     this.setCorrectionPanelSize()
   }
 
@@ -864,7 +867,9 @@ class BesService {
    * Clears auxiliary DOM elements for text adornments.
    */
   clearCorrectionPanel() {
-    this.panelParent.remove()
+    this.correctionPanel.remove()
+    this.scrollPanel.remove()
+    this.canvasPanel.remove()
   }
 
   /**
@@ -874,13 +879,15 @@ class BesService {
     this.disableMutationObserver()
     const styles = window.getComputedStyle(this.hostElement)
     const hostRect = this.hostElement.getBoundingClientRect()
-    // Sync margins one by one. Firefox is not happy when syncing all at once.
     this.correctionPanel.style.marginLeft = styles.marginLeft
     this.correctionPanel.style.marginTop = styles.marginTop
     this.correctionPanel.style.marginRight = styles.marginRight
     this.correctionPanel.style.marginBottom = styles.marginBottom
     this.correctionPanel.style.boxSizing = styles.boxSizing
     this.correctionPanel.style.scrollBehavior = styles.scrollBehavior
+    this.correctionPanel.style.overflow = 'hidden'
+    this.scrollPanel.style.width = `${this.hostElement.scrollWidth}px`
+    this.scrollPanel.style.height = `${this.hostElement.scrollHeight}px`
     this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
     this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
     const dpr = window.devicePixelRatio
@@ -2245,14 +2252,6 @@ class BesTAService extends BesPlainTextService {
     return service
   }
 
-  /**
-   * Unregisters grammar checking service.
-   */
-  unregister() {
-    super.unregister()
-    this.textElement.remove()
-  }
-
   /**
    * Creates a clone div element for the <textarea> element
    *
@@ -2292,6 +2291,7 @@ class BesTAService extends BesPlainTextService {
     textElement.style.hyphens = styles.hyphens
     textElement.style.boxSizing = styles.boxSizing
     textElement.style.scrollBehavior = styles.scrollBehavior
+    textElement.style.overflow = 'hidden'
     textElement.style.border = styles.border
     textElement.style.borderRadius = styles.borderRadius
     textElement.style.padding = styles.padding

styles.css

@@ -48,9 +48,12 @@
   pointer-events: none;
 }
 
+.bes-correction-panel-scroll {
+  position: relative;
+}
+
 .bes-text-panel {
   position: absolute;
-  overflow: hidden;
   margin: 0px;
   color: transparent;
   border-color: transparent;