Image annotations are "under" form field

WebViewer Version: 8.2.0

Do you have an issue with a specific file(s)? no
Can you reproduce using one of our samples or online demos? yes
Are you using the WebViewer server? no
Does the issue only happen on certain browsers? no
Is your issue related to a front-end framework? no
Is your issue related to annotations? yes

Please give a brief summary of your issue:

When adding an image annotation in a pdf with form fields. The image is displayed “under” the form fields.
I expect the form fields to not be visible due to them being covered by the image

Please describe your issue and provide steps to reproduce it:
1.) Open a PDF file with form fields in it.
2.) Add a image annotation of the pdf
3.) Enlarge / drag it over a form field

I expect the form field to be covered by the image
Instead the form field is still accessible

Please provide a link to a minimal sample where the issue is reproducible:

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:



Thank you for contacting us about WebViewer. What you are seeing isn’t really a bug, Acrobat and Chrome built in PDF viewer does the same thing. The following is what WebViewer looks like compared to Acrobat

If you don’t want this behaviour you can do something like the following

  1. Add a css style sheet like the following
.auxiliary {
  z-index: 41 !important;
  pointer-events: none;

More information about styling WebViewer

  1. Add code to change the widget behaviour like the following
Webviewer({ css: 'path to your CSS',
}, document.getElementById('viewer')).then((instance) => {
  const { documentViewer, annotationManager, Annotations } = instance.Core;

  const defaultFunc = instance.Tools.Tool.prototype.mouseMove;
  instance.Tools.Tool.prototype.mouseMove = function(e) {
    //  the current location of the mouse cursor
    const {pageNumber, x, y } = documentViewer.getViewerCoordinatesFromMouseEvent(e);

    const annotList = annotationManager.getAnnotationsList();

    const stampUnderMouse = annotList.filter(
      a => a instanceof Annotations.StampAnnotation
      && a.PageNumber === pageNumber
      && a.getX() < x 
      && (a.getX() + a.Width) > x 
      && a.getY() < y 
      && (a.getY()+ a.Height) > y

      if (stampUnderMouse.length) {
        // will need to search though all the widget under the stamp annotaiton like the above
       // and do something like
       // annot.fieldFlags.set(instance.Annotations.WidgetFlags.READ_ONLY, true);
       // to disable widget under the stamp
      }  else {
        // will need to remove the "READ_ONLY"  flag that was added above

      defaultFunc.apply(this, arguments);

Main thing is you’ll need to manually disable form fields that are under the image

Please let me know if the above helps

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.