React-pdf: 尝试使用mark标签在注释层中突出显示文本时出现奇怪的字体行为。

描述

尝试使用mark标签在注释层中突出显示文本时出现奇怪的字体行为。

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

    }

（我认为主要是从您的一个样本中获取的）

预期行为

高亮显示的文本显示应在相同的位置，相同的字体和位置。

附加信息
我已经尝试了svg和canvas，但是看到了相同的行为。

在＃189中遇到了相同的行为，但是我没有任何变通办法。 我也看过＃212。

环境

• 浏览器（如果适用）[例如Chrome 57，Firefox 59]：我已经在firefox上对这两种chrome进行了最新测试。 两者的行为均出现故障。
• React-PDF版本[例如3.0.4]：
• React版本[例如16.3.0]：
• Webpack版本（如果适用）[例如4.16.2]：