diff --git a/src/util/ImageSnippet.js b/src/util/ImageSnippet.js
index 6f06dfc..48fb258 100644
--- a/src/util/ImageSnippet.js
+++ b/src/util/ImageSnippet.js
@@ -5,7 +5,10 @@ export const getSnippet = (viewer, element) => {
   // child (in case of editable shapes, the element would be 
   // the group with shape + handles)
   const shape = hasClass(element, '.a9s-annotation') ? 
-    element : element.querySelector('.a9s-annotation');
+    element : element.closest('.a9s-annotation');
+
+  const outer = shape.querySelector('.a9s-inner');
+  const outerBounds = outer.getBoundingClientRect();
 
   // Scale factor for OSD canvas element (physical vs. logical resolution)
   const { canvas } = viewer.drawer;
@@ -13,11 +16,9 @@ export const getSnippet = (viewer, element) => {
   const kx = canvas.width / canvasBounds.width;
   const ky = canvas.height / canvasBounds.height;
 
-  const shapeBounds = shape.getBoundingClientRect();
-
-  const x = shapeBounds.x - canvasBounds.x;
-  const y = shapeBounds.y - canvasBounds.y;
-  const { width, height } = shapeBounds;
+  const x = outerBounds.x - canvasBounds.x;
+  const y = outerBounds.y - canvasBounds.y;
+  const { width, height } = outerBounds;
 
   // Cut out the image snippet as in-memory canvas element
   const snippet = document.createElement('CANVAS');
@@ -27,7 +28,7 @@ export const getSnippet = (viewer, element) => {
   ctx.drawImage(canvas, x * kx, y * ky, width * kx, height * ky, 0, 0, width, height);
 
   // Compute reverse transform
-  const topLeft = viewer.viewport.viewportToImageCoordinates(shapeBounds.x, shapeBounds.y);
+  const topLeft = viewer.viewport.viewerElementToImageCoordinates(new OpenSeadragon.Point(x, y));
   const imageZoom = viewer.viewport.viewportToImageZoom(viewer.viewport.getZoom()); 
 
   return {