TextLayerMode.ENABLE_ENHANCE creating (big) empty spans hovering spans containing the actual text

[lportpin]

Attach (recommended) or Link to PDF file here
medical_certificate_fake.pdf

Configuration

• Web browser and its version: Google Chrome - Version 97.0.4692.71 (Official Build) (arm64)
• Operating system and its version: macOS Big Sur 11.2.2
• PDF.js version: 2.12.313 (also tested from master at commit f955b0e)
• Is a browser extension: no

Steps to reproduce the problem

1. Clone pdf.js repository
2. In pdf.s/web/app_option.js, change textLayerMode.value to 2 (which corresponds to TextLayerMode.ENABLE_ENHANCE)
3. Install and serve with npm install && gulp server
4. Open the viewer http://localhost:8888/web/viewer.html and open the file attached to this ticket
5. Double click on the word 'medical' (first row, second cell)

What is the expected behavior?

'medical' word to be selected as follows (this is obtained with textLayerMode = TextLayerMode.ENABLE)

What went wrong? (add screenshot)

A bigger span which contains nothing but a whitespace is selected, making the selection of the actual text impossible.
Removing the span manually from the chrome devtools allows to properly select the text.
As a side note, everything on the same line at the right the checkmark in "class 2" cannot be selected either as the span containing the checkmark has a huge right padding.

I hope you could assist.
Thanks in advance for your help and the time you'll spend looking at this.

[Snuffleupagus]

Please keep in mind that the ENABLE_ENHANCE mode is essentially unmaintained at this point, and no real development has happened for years (in general it's often too slow to be usable in practice); see also e.g. #7584 (comment).

[Snuffleupagus]

Closing as WONTFIX, for the reasons outlined in #14463 (comment) and #7584 (comment).