TextHighlightAnnotation is hiding text when text length exceeds certain threshold

WebViewer Version:
8.8.0 and also occurred on 8.2.0

Do you have an issue with a specific file(s)?
Maybe. Not sure.

Can you reproduce using one of our samples or online demos?
Haven’t found one that would allow me to

Are you using the WebViewer server?

Does the issue only happen on certain browsers?
Happens in Chrome v105.0.5195.102, not Safari

Is your issue related to a front-end framework?
Yes @pdftron/webviewer. I’m using React v17.

Is your issue related to annotations?

Please give a brief summary of your issue:
After I’ve captured the user’s highlighted text, I create a new TextHighlightAnnotation. When the text length is greater than a specific length, the highlight is completely opaque and the text underneath is not visible.

In the image below, you’ll notice the first highlight’s text cannot be seen, while the second one allows you to see the text.
Screen Shot 2022-09-09 at 9.27.14 AM

Please describe your issue and provide steps to reproduce it:
I capture the text selection and notify the parent component via _setSelectedText.

documentViewer.addEventListener('textSelected', (quads, text, pageNumber, ...rest) => {
  _setSelectedText({ pageNumber, quads, text })

The parent component sends the updated document object that includes information for a new annotation to be created and it’s sent to updatePageAnnotations function where the annotation is created, added to the annotationsManager and redrawn.

const updatePageAnnotations = ({ keyTerms, pageNumber, viewer }: UpdatePageAnnotationsProps) => {
  const { annotationManager } = viewer.Core
  const currentAnnotations = annotationManager.getAnnotationsList()
  const ids = currentAnnotations.map((a) => a.getCustomData('id'))
  let redraw = false

  // Add key terms that don't have matching annotations for the current page
  const keyTermsToAdd = keyTerms.filter(
    ({ id, pdfPageNumber }) => !ids.includes(id) && pdfPageNumber === pageNumber
  if (keyTermsToAdd.length) {
    const annotationsToAdd = createAnnotations({ pageNumber, keyTerms: keyTermsToAdd })
    if (annotationsToAdd.length) {
      redraw = true

  // Only redraw if a change was made
  if (redraw) {
    annotationManager.drawAnnotations({ pageNumber })

interface CreateAnnotationProps {
  highlightColor: string
  id: string
  pageNumber: number
  quads: Core.Math.Quad[]
  title: string

const createAnnotation = ({
}: CreateAnnotationProps) => {
  const annotation = new Annotations.TextHighlightAnnotation({
    opacityCap: 0.5,
    Author: 'Term Type',
    IsHoverable: true,
    PageNumber: pageNumber,
    Quads: quads,
    StrokeColor: new Annotations.Color(...hexToRgb(highlightColor)),
  annotation.setCustomData('id', id)
  return annotation

interface CreateAnnotationsProps {
  keyTerms: EnrichedKeyTerm[]
  pageNumber: number

const createAnnotations = ({ keyTerms, pageNumber }: CreateAnnotationsProps) => {
  const currentKeyTerms = keyTerms.filter(
    ({ pdfPageNumber, quads }) => pdfPageNumber === pageNumber && quads
  if (!currentKeyTerms.length) {
    return []

  return currentKeyTerms
    .map(({ highlightColor, id, quads, title }) =>
      createAnnotation({ highlightColor, id, pageNumber, quads, title })
    .filter((k) => k)

After calling annotationsManager.drawAnnotations the opaque annotation shows on the page.

Please provide a link to a minimal sample where the issue is reproducible:
I don’t have one

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:


We have actually noticed this as well on v8.7.0 (and would appreciate a fix).

In our case, we are programmatically creating TextHighlightAnnotation’s, and it seems to be less about the length of the selection and more related to the document viewer zoom. For example, the issue affects at least the first highlight annotation when zoomed in over ~96%:

Screen Shot 2022-09-09 at 11.30.10 AM


Just tried zooming in… you’re right, the zoom level effects each annotation separately. The smaller the text length of the highlight, the more you have to zoom in to have the highlight turn completely opaque.

Thanks for the reply @nick

Nothing from PDFTron?

Is this an issue you’re aware of? What’s the timeline to fix?


Thank you for reporting this issue.

We will investigate and let you know when we have further information.



May I know if the opaque highlights are gone after you change the zoom level? Also, could you help provide a screen recording if possible to help us reproduce the issue and investigate? Thanks!

Could you also provide a code snippet which can reproduce the issue? Thanks!


I’ve created a video demonstrating the issue.

I also put together an initial codesandbox but not sure how to reference the WebViewer files needed to render the viewer (ie: the path property when instantiating the WebViewer). If you can get that working, the rest of the code should provide an example of the issue. If not, please let me know and I’ll update appropriately.


Looks like the ‘textSelected’ event can be triggered quite frequently, could you double check if you’re creating multiple TextHighlightAnnotations for one highlighted text?


Yep, I’ve verified that I’m only creating one TextHighlightAnnotation when selecting the text and pressing the Add Text button, as seen in the video I created.

I tried to reproduce the issue with our online sample here - JavaScript PDF Viewer Demo but failed.

Are you able to reproduce with the online sample?

Also are you able to reproduce with other files?



I was able to reproduce using the online sample.


Still not able to reproduce with the sample page following the same steps.

Did you run some code snippet in the browser console for the sample page test?




Are you using M1 macbook?

Yes, I have an M1 and I’ve just verified that it’s only happening on the M1.


We’ve narrowed down the issue to a chromium bug with M1 chips.

Here’s the link to the bug report:

The work around for this bug however is to turn off hardware acceleration in the chrome settings. This will allow for text highlighting without any issue in chrome.


Thanks Wanbo. I can do that, but that’s not a practical solution for our users. What’s PDFTron’s plan to fix (or at least mitigate) this problem?


We have submitted the bug report to Chromium and I think for now we have to wait for their fix.


Will you update this thread when this is fixed? Its a big problem for us

1 Like

Sure, for now we are waiting for the fix from Chromium.