React-pdf: マークタグを使用して注釈レイヤーのテキストを強調表示しようとしたときの奇妙なフォントの動作。

説明

マークタグを使用して注釈レイヤーのテキストを強調表示しようとしたときの奇妙なフォントの動作。

react-bootstrapモーダルダイアログにPDFを表示しています。 PageコンポーネントのcustomTextRendererプロパティを使用して、ページでハイライト検索用語を取得しようとしています。 強調表示されたテキストは別のフォントでレンダリングされ、適切な場所に表示されません。

再現する手順

動作を再現する手順：
コードは次のようになります。

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

customTextRendererは次のようになります。

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

    }

（主にあなたのサンプルの1つから取られたと思います）

予想される行動

ハイライトされたテキストショーは、同じ場所、同じフォント、同じ場所にある必要があります。

追加情報
svgとcanvasの両方で試しましたが、同じ動作が見られます。

＃189でも同じ動作が発生しましたが、回避策がありませんでした。 ＃212も見てきました。

環境

• ブラウザ（該当する場合）[例：Chrome 57、Firefox 59]：firefoxで両方のChromeの最新版でテストしました。 動作は両方でグリッチです。
• React-PDFバージョン[例3.0.4]：
• Reactバージョン[例：16.3.0]：
• Webpackバージョン（該当する場合）[例：4.16.2]：