React-pdf: Seltsames Schriftverhalten beim Versuch, Text in der Anmerkungsebene mit dem Markierungs-Tag hervorzuheben.

Beschreibung

Seltsames Schriftverhalten beim Versuch, Text in der Anmerkungsebene mit dem Markierungs-Tag hervorzuheben.

Ich zeige ein PDF in einem reaktiven Bootstrap-Modaldialog an. Ich versuche, Suchbegriffe auf der Seite mithilfe der customTextRenderer-Requisite der Seitenkomponente hervorzuheben. Der hervorgehobene Text wird in einer anderen Schriftart und nicht ganz an der richtigen Stelle gerendert.

Schritte zum Reproduzieren

Schritte zum Reproduzieren des Verhaltens:
Der Code sieht folgendermaßen aus:

<Modal show={this.state.showPDF}

    onHide={this.handleClose} dialogClassName="modal-100w">
    <Modal.Header closeButton>
    </Modal.Header>
    <Modal.Body style={{margin: "auto"}}>
    <Document file={this.state.pdfURL} onLoadSuccess={(page) => this.onDocumentLoadSuccess(page)}>
        <Page  renderMode="svg" scale={1.0} pageNumber={1} customTextRenderer={(textItem) => this.customTextRenderer(textItem)} onLoadSuccess={(page) => this.onPageLoadSuccess(page)} />
        </Document>
    </Modal.Body>
</Modal>

und customTextRenderer sieht so aus:

return textItem.str
              .split(this.terms[0])
              .reduce((strArray, currentValue, currentIndex) => (
                currentIndex === 0
                  ? ([...strArray, currentValue])
                  : ([...strArray, (
                    // eslint-disable-next-line react/no-array-index-key
                    <mark key={currentIndex}>
                      {this.terms[0]}
                    </mark>
                  ), currentValue])
    ), []);

    }

(hauptsächlich aus einer Ihrer Proben entnommen, denke ich)

Erwartetes Verhalten

Die hervorgehobene Textshow sollte sich an derselben Stelle und in derselben Schriftart und an derselben Stelle befinden.

Zusätzliche Information
Ich habe es sowohl mit SVG als auch mit Canvas versucht, sehe aber das gleiche Verhalten.

Das gleiche Verhalten wurde in # 189 festgestellt, aber ich hatte kein Glück mit Problemumgehungen. Ich habe mir auch # 212 angesehen.

Umgebung

• Browser (falls zutreffend) [zB Chrome 57, Firefox 59]: Ich habe bei Firefox das neueste von beiden Chrome getestet. Das Verhalten ist in beiden Fällen fehlerhaft.
• React-PDF-Version [zB 3.0.4]:
• Version reagieren [zB 16.3.0]:
• Webpack-Version (falls zutreffend) [zB 4.16.2]: