From 2c003ae249337aed321630ed3984b0cffb9bd445 Mon Sep 17 00:00:00 2001
From: Calixte Denizet <calixte.denizet@gmail.com>
Date: Wed, 27 Jul 2022 15:02:01 +0200
Subject: [PATCH] Fix text selection with hdpi screens (#15229)

---
 src/display/text_layer.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/display/text_layer.js b/src/display/text_layer.js
index d68d37f804c932..5d40b57b38e015 100644
--- a/src/display/text_layer.js
+++ b/src/display/text_layer.js
@@ -166,6 +166,8 @@ function appendText(task, geom, styles, ctx) {
   textDiv.style.fontSize = `${fontHeight}px`;
   textDiv.style.fontFamily = style.fontFamily;
 
+  textDivProperties.fontSize = fontHeight;
+
   // Keeps screen readers from pausing on every new text span.
   textDiv.setAttribute("role", "presentation");
 
@@ -595,6 +597,7 @@ class TextLayerRenderTask {
     this._capability = createPromiseCapability();
     this._renderTimer = null;
     this._bounds = [];
+    this._devicePixelRatio = window.devicePixelRatio;
 
     // Always clean-up the temporary canvas once rendering is no longer pending.
     this._capability.promise
@@ -680,14 +683,17 @@ class TextLayerRenderTask {
 
     let transform = "";
     if (textDivProperties.canvasWidth !== 0 && textDivProperties.hasText) {
-      const { fontSize, fontFamily } = textDiv.style;
+      const { fontFamily } = textDiv.style;
+      const { fontSize } = textDivProperties;
 
       // Only build font string and set to context if different from last.
       if (
         fontSize !== this._layoutTextLastFontSize ||
         fontFamily !== this._layoutTextLastFontFamily
       ) {
-        this._layoutTextCtx.font = `${fontSize} ${fontFamily}`;
+        this._layoutTextCtx.font = `${
+          fontSize * this._devicePixelRatio
+        }px ${fontFamily}`;
         this._layoutTextLastFontSize = fontSize;
         this._layoutTextLastFontFamily = fontFamily;
       }
@@ -695,7 +701,8 @@ class TextLayerRenderTask {
       const { width } = this._layoutTextCtx.measureText(textDiv.textContent);
 
       if (width > 0) {
-        const scale = textDivProperties.canvasWidth / width;
+        const scale =
+          (this._devicePixelRatio * textDivProperties.canvasWidth) / width;
         if (this._enhanceTextSelection) {
           textDivProperties.scale = scale;
         }