Fix text selection with hdpi screens (#15229)

src/display/text_layer.js

@@ -132,12 +132,14 @@ function appendText(task, geom, styles, ctx) {
         paddingRight: 0,
         paddingTop: 0,
         scale: 1,
+        fontSize: 0,
       }
     : {
         angle: 0,
         canvasWidth: 0,
         hasText: geom.str !== "",
         hasEOL: geom.hasEOL,
+        fontSize: 0,
       };
 
   task._textDivs.push(textDiv);
@@ -166,6 +168,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 +599,7 @@ class TextLayerRenderTask {
     this._capability = createPromiseCapability();
     this._renderTimer = null;
     this._bounds = [];
+    this._devicePixelRatio = globalThis.devicePixelRatio || 1;
 
     // Always clean-up the temporary canvas once rendering is no longer pending.
     this._capability.promise
@@ -680,22 +685,26 @@ 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;
       }
       // Only measure the width for multi-char text divs, see `appendText`.
       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;
         }