diff --git a/src/components/comments/html-pin-adapter/index.ts b/src/components/comments/html-pin-adapter/index.ts
index 619cbd20..9ca6b66d 100644
--- a/src/components/comments/html-pin-adapter/index.ts
+++ b/src/components/comments/html-pin-adapter/index.ts
@@ -389,7 +389,6 @@ export class HTMLPin implements PinAdapter {
       this.addTemporaryPinToElement(elementId, temporaryPin);
     }
 
-    const { width, height } = this.divWrappers.get(elementId).getBoundingClientRect();
     const { x, y } = this.temporaryPinCoordinates;
 
     temporaryPin.setAttribute('position', JSON.stringify({ x, y }));
@@ -726,8 +725,9 @@ export class HTMLPin implements PinAdapter {
 
     const { width, height } = wrapper.getBoundingClientRect();
 
-    x /= width;
-    y = (y - 32) / height;
+    // save coordinates as percentages
+    x = (x * 100) / width;
+    y = ((y - 32) * 100) / height;
     this.onPinFixedObserver.publish({
       x,
       y,
diff --git a/src/web-components/comments/components/annotation-pin.ts b/src/web-components/comments/components/annotation-pin.ts
index 6daead38..1b324752 100644
--- a/src/web-components/comments/components/annotation-pin.ts
+++ b/src/web-components/comments/components/annotation-pin.ts
@@ -225,9 +225,9 @@ export class CommentsAnnotationPin extends WebComponentsBaseElement {
 
     let style = '';
     if (this.keepPositionRatio) {
-      style = `top: ${this.position.y * 100}%; left: ${this.position.x * 100}%;`;
+      style = `top: ${this.position.y}%; left: ${this.position.x}%;`;
     } else {
-      style = `top: ${this.position.y * 100}px; left: ${this.position.x * 100}px;`;
+      style = `top: ${this.position.y}px; left: ${this.position.x}px;`;
     }
 
     if (this.type === PinMode.ADD) {