Cannot tag bounding boxes on mobile touchscreen browser

[series8217]

Describe the bug It is not possible to tag bounding boxes when running the VoTT web app on a mobile device browser using a touchscreen. The top left of the bounding box is always the (0,0) coordinate of the image and:

• on Safari the bounding box generation hangs with the dotted line crosshairs instead of creating a bounding box
• on Chrome the bounding box is created but always has top left at (0,0)

I have tested on iOS and Android using Safari and Chrome browsers on iOS and Chrome browser on Android.

To Reproduce Steps to reproduce the behavior:

1. Go to https://vott.z22.web.core.windows.net/
2. Create a new project using Azure cloud or Bing image search APIs
3. Open an image asset
4. Tap the bounding box tool in the top toolbar
5. Tap and drag in the image region to attempt to create a bounding box

Expected behavior A bounding box should be created across the region that was tapped and dragged through.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: iOS, Android
• Browser: Safari (iOS), Chrome (iOS), Chrome (Android)
• VoTT Version: v2.2.0

[series8217]

These issues can also be reproduced in desktop environments by enabling touch device emulation in Google Chrome developer tools