fix: workaround Safari bug for bounding boxes at line breaks

CHANGELOG.md

@@ -15,6 +15,8 @@ app.
 - (Chrome, Edge, Safari) Fixed a bug where overlays would be broken on
   [MangaDex](https://mangadex.org/)
   ([#1110](https://github.com/birchill/10ten-ja-reader/issues/1110)).
+- (Safari) Improved popup placement when looking up words at the start of
+  a line.
 - (Safari) Fixed a bug where the toolbar icon would get stuck not updating.
 
 ## [1.13.6] - 2023-02-23 (Firefox, Thunderbird only)

src/content/get-cursor-position.ts

@@ -1,7 +1,10 @@
 import { html } from '../utils/builder';
 import { isTextInputNode, isTextNode, SVG_NS } from '../utils/dom-utils';
 import { bboxIncludesPoint, Point } from '../utils/geometry';
-import { getRangeForSingleCodepoint } from '../utils/range';
+import {
+  getBboxForSingleCodepointRange,
+  getRangeForSingleCodepoint,
+} from '../utils/range';
 import { isChromium } from '../utils/ua-utils';
 
 import { isGdocsOverlayElem } from './gdocs-canvas';
@@ -294,8 +297,9 @@ function getVisualOffset({
     direction: 'backwards',
   });
 
-  const previousCharacterBbox = range.getBoundingClientRect();
-  return bboxIncludesPoint({ bbox: previousCharacterBbox, point })
+  const previousCharacterBbox = getBboxForSingleCodepointRange(range);
+  return previousCharacterBbox &&
+    bboxIncludesPoint({ bbox: previousCharacterBbox, point })
     ? range.startOffset
     : position.offset;
 }
@@ -448,7 +452,10 @@ function getDistanceFromTextNode(
 
   // Get bbox of first character in range (since that's where we select from).
   const range = getRangeForSingleCodepoint({ source: node, offset });
-  const bbox = range.getBoundingClientRect();
+  const bbox = getBboxForSingleCodepointRange(range);
+  if (!bbox) {
+    return null;
+  }
 
   // Find the distance from the cursor to the closest edge of that character
   // since if we have a large font size the two distances could be quite
@@ -662,8 +669,8 @@ function adjustForRangeBoundary({
     offset: 0,
   });
 
-  const firstCharBbox = firstCharRange.getBoundingClientRect();
-  if (!bboxIncludesPoint({ bbox: firstCharBbox, point })) {
+  const firstCharBbox = getBboxForSingleCodepointRange(firstCharRange);
+  if (!firstCharBbox || !bboxIncludesPoint({ bbox: firstCharBbox, point })) {
     return range;
   }
 

src/content/get-text.ts

@@ -1,5 +1,8 @@
 import { bboxIncludesPoint, Point } from '../utils/geometry';
-import { getRangeForSingleCodepoint } from '../utils/range';
+import {
+  getBboxForSingleCodepointRange,
+  getRangeForSingleCodepoint,
+} from '../utils/range';
 
 import { getContentType } from './content-type';
 import { getTextFromAnnotatedCanvas } from './gdocs-canvas';
@@ -168,9 +171,11 @@ function getFirstCharBbox(position: CursorPosition): DOMRect | undefined {
   });
 
   // Skip empty ranges
-  return firstCharRange.startOffset !== firstCharRange.endOffset
-    ? firstCharRange.getBoundingClientRect()
-    : undefined;
+  if (firstCharRange.collapsed) {
+    return undefined;
+  }
+
+  return getBboxForSingleCodepointRange(firstCharRange);
 }
 
 function getTextNodeStart({

src/content/target-props.ts

@@ -117,12 +117,21 @@ function getInitialClientBboxofTextSelection(
         })[0];
       } else if (range) {
         range.setEnd(node, end);
-        result[size] = range.getClientRects()[0];
+
+        // Safari will sometimes return zero-width bboxes when the range starts
+        // on a new line so we should make sure to choose the wider bbox.
+        const bbox = [...range.getClientRects()].reduce<DOMRect | undefined>(
+          (result, bbox) =>
+            (result?.width || 0) >= bbox.width ? result : bbox,
+          undefined
+        );
 
         // Sometimes getClientRects can return an empty array
-        if (!result[size]) {
+        if (!bbox) {
           return undefined;
         }
+
+        result[size] = bbox;
       }
 
       lastEnd = end;

src/utils/range.ts

@@ -34,3 +34,20 @@ export function getRangeForSingleCodepoint({
 
   return range;
 }
+
+export function getBboxForSingleCodepointRange(
+  range: Range
+): DOMRect | undefined {
+  // In Safari when a range is at the start of a line, getClientRects()
+  // returns two bounding boxes: an empty (zero-width) one at the end of the
+  // line and a non-empty one for the first character at the start of the line.
+  //
+  // Worse still, getBoundingClientRect() returns the union of the two producing
+  // a massive (and very wrong) bounding box.
+  //
+  // Here we get the individual client rects and then return the widest one.
+  return [...range.getClientRects()].reduce<DOMRect | undefined>(
+    (result, bbox) => ((result?.width || 0) >= bbox.width ? result : bbox),
+    undefined
+  );
+}