React-pdf: Perilaku font yang aneh saat mencoba menyorot teks di lapisan anotasi dengan tag tanda.

Deskripsi

Perilaku font yang aneh saat mencoba menyorot teks di lapisan anotasi dengan tag tanda.

Saya menampilkan pdf dalam dialog modal react-bootstrap. Saya mencoba untuk mendapatkan sorotan istilah pencarian di halaman menggunakan prop customTextRenderer dari komponen Halaman. Teks yang disorot ditampilkan dalam font yang berbeda dan tidak tepat di lokasi yang tepat.

Langkah-langkah untuk mereproduksi

Langkah-langkah untuk mereproduksi perilaku:
Kodenya terlihat seperti ini:

<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>

dan customTextRenderer terlihat seperti ini:

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])
    ), []);

    }

(saya pikir sebagian besar diambil dari salah satu sampel Anda)

Perilaku yang diharapkan

Pertunjukan teks yang disorot harus di lokasi yang sama dan dengan font yang sama dan di lokasi yang sama.

Informasi tambahan
Saya sudah mencoba dengan svg dan kanvas tetapi melihat perilaku yang sama.

Perilaku yang sama ditemukan di # 189, tetapi saya tidak beruntung dengan solusi apa pun. Saya juga melihat # 212.

Lingkungan Hidup

• Browser (jika ada) [mis. Chrome 57, Firefox 59]: Saya telah menguji versi terbaru dari kedua chrome di firefox. Perilakunya buruk pada keduanya.
• Versi React-PDF [mis. 3.0.4]:
• Versi React [misalnya 16.3.0]:
• Versi webpack (jika ada) [mis. 4.16.2]: