Weird rendering artifacts/borders when enabling panzoom with onTouch: () => false

When I enable panzoom on an image and then tap on the image I see weird golden borders on Chrome’s developer tools in mobile device mode and blue borders on my iPhone in Chrome.

Chrome:

(notice the golden borders on the right and left)

iOS chrome:

(Notice the blue borders)

I verified that there are no actual borders being set, these seem to be weird rendering artifacts, perhaps due to css transforms? Not initializing panzoom makes the borders go away.

This is my code:

    panzoom(backgroundImageRef.current, {
        minZoom: 1, // prevent zooming out
        maxZoom: 4, // prevent zooming beyond acceptable levels
        bounds: true, // prevent panning outside of container
        boundsPadding: 1, // prevent panning outside of container
        zoomDoubleClickSpeed: 1, // disable double click zoom
        beforeWheel: () => true, // disable wheel scrolling
        filterKey: () => true, // disable keybindings
        beforeMouseDown: () => true, // disable panning
        onTouch: () => false // do not preventDefault
      })

Note that when I change onTouch: () => false to onTouch: () => true, the borders seem to go away. However, this is unacceptable because the preventDefault prevents the user from being able to scroll (pan) on the x or y axis.

[anvaka]

The library supports keyboard based interaction, for that it adds tabindex attribute for the container, which makes it focusable.

If you do not prefer to support keyboard interaction pass disableKeyboardInteraction: true into the options. I do not recommend this approach, as keyboard interaction can be crucial in some hardware configurations (and sometime more accessible)

Alternative and in my opinion a better solution would be to set focus outline on the parent element of your zoomable container, like you did. So that the browser doesn’t apply default css styles to the focused element

[tommedema]

I don’t know why, but the borders went away after I added this in my css:

// Removes unnecessary outlines on safari
  *:focus {
    outline: none;
  }

How is this related to panzoom? Without panzoom, it wasn’t necessary.