Attach (recommended) or Link to PDF file here:
[Testfile v1.5 to PDFA2.pdf](https://github.com/mozilla/pdf.js/files/6310752/Testfile.v1.5.to.PDFA2.pdf)


Configuration:
- Web browser and its version: Version 89.0.4389.114 (Offizieller Build) (x86_64)
- Operating system and its version: Windows 10 / MacOS BigSur
- PDF.js version: 2.5.207
- Is a browser extension: no 

Steps to reproduce the problem:
1.  Open Testfile v1.5 to PDFA2.pdf in pdf.js viewer demo
2. text is covered up by markings / highlights which are stored in pdf itself

What is the expected behavior? (add screenshot)
Should be displayed as in Acrobat Reader
<img width="1169" alt="Bildschirmfoto 2021-04-14 um 14 24 41" src="https://user-images.githubusercontent.com/1286150/114710202-bf175a80-9d2d-11eb-8d54-75481fe91b7d.png">

What went wrong? (add screenshot)
It's how it is displayed in pdf.js viewer
<img width="782" alt="Bildschirmfoto 2021-04-14 um 14 24 16" src="https://user-images.githubusercontent.com/1286150/114710311-d8200b80-9d2d-11eb-8000-b67b94488929.png">

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

if (!this.appearance) {
      
      const strokeColor = this.color
        ? Array.from(this.color).map(c => c / 255)
        : [0, 0, 0];
      const borderWidth = this.borderStyle.width || 1;
      this._setDefaultAppearance({
        xref: parameters.xref,
        extra: `${borderWidth} w`,
        strokeColor,
        pointsCallback: (buffer, points) => {
          /
          /
          /
          /
          for (const inkList of this.data.inkLists) {
            for (let i = 0, ii = inkList.length; i < ii; i++) {
              buffer.push(
                `${inkList[i].x} ${inkList[i].y} ${i === 0 ? "m" : "l"}`
              );
            }
            buffer.push("S");
          }
          return [points[0].x, points[1].x, points[3].y, points[1].y];
        },
      });
    }
  }
}
class HighlightAnnotation extends MarkupAnnotation {