diff --git a/service.js b/service.js
index fc89217..69c6d25 100644
--- a/service.js
+++ b/service.js
@@ -976,23 +976,6 @@ class BesService {
     this.disableMutationObserver()
 
     const styles = window.getComputedStyle(this.hostElement)
-    this.textFont = styles.fontFamily
-
-    // Resize canvas if needed.
-    this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
-    this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
-    const dpr = window.devicePixelRatio
-    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
-    const newCanvasWidth = Math.round(canvasPanelRect.width * dpr)
-    const newCanvasHeight = Math.round(canvasPanelRect.height * dpr)
-    if (
-      this.canvasPanel.width !== newCanvasWidth ||
-      this.canvasPanel.height !== newCanvasHeight
-    ) {
-      this.canvasPanel.width = newCanvasWidth
-      this.canvasPanel.height = newCanvasHeight
-      this.redrawAllMistakeMarkup()
-    }
 
     // Note: Firefox is not happy when syncing all margins at once.
     this.scrollPanel.style.marginLeft = styles.marginLeft
@@ -1016,6 +999,24 @@ class BesService {
       this.scrollPanel.style.height = `${hostRect.height}px`
     }
 
+    this.textFont = styles.fontFamily
+
+    // Resize canvas if needed.
+    this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
+    this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
+    const dpr = window.devicePixelRatio
+    const canvasPanelRect = this.canvasPanel.getBoundingClientRect()
+    const newCanvasWidth = Math.round(canvasPanelRect.width * dpr)
+    const newCanvasHeight = Math.round(canvasPanelRect.height * dpr)
+    if (
+      this.canvasPanel.width !== newCanvasWidth ||
+      this.canvasPanel.height !== newCanvasHeight
+    ) {
+      this.canvasPanel.width = newCanvasWidth
+      this.canvasPanel.height = newCanvasHeight
+      this.redrawAllMistakeMarkup()
+    }
+
     this.enableMutationObserver()
   }