diff --git a/packages/core/src/services/interaction/InteractionService.ts b/packages/core/src/services/interaction/InteractionService.ts
index 6859cd3e89..af0bd2c2ed 100644
--- a/packages/core/src/services/interaction/InteractionService.ts
+++ b/packages/core/src/services/interaction/InteractionService.ts
@@ -151,14 +151,15 @@ export default class InteractionService extends EventEmitter
     return { x: clientX, y: clientY, lngLat, type };
   }
   private onHover = (event: MouseEvent) => {
-    let { x, y } = event;
+    const { clientX, clientY } = event;
+    let x = clientX;
+    let y = clientY;
     const type = event.type;
-
     const $containter = this.mapService.getMapContainer();
     if ($containter) {
       const { top, left } = $containter.getBoundingClientRect();
-      x -= left;
-      y -= top;
+      x = x - left - $containter.clientLeft;
+      y = y - top - $containter.clientTop;
     }
     const lngLat = this.mapService.containerToLngLat([x, y]);
 
diff --git a/packages/l7/demo/polygon.html b/packages/l7/demo/polygon.html
index c7a99752d8..39061f960e 100644
--- a/packages/l7/demo/polygon.html
+++ b/packages/l7/demo/polygon.html
@@ -11,10 +11,10 @@
       }
       #map {
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        top: 100px;
+        left: 50px;
+         width:500px;
+         height:400px;
       }
     </style>
     <link
diff --git a/packages/utils/src/color.ts b/packages/utils/src/color.ts
index 072a860076..cf31e6964b 100644
--- a/packages/utils/src/color.ts
+++ b/packages/utils/src/color.ts
@@ -16,7 +16,9 @@ export function rgb2arr(str: string) {
 }
 
 export function decodePickingColor(color: Uint8Array): number {
-  const [i1, i2, i3] = color;
+  const i1 = color && color[0];
+  const i2 = color && color[1];
+  const i3 = color && color[2];
   // 1 was added to seperate from no selection
   const index = i1 + i2 * 256 + i3 * 65536 - 1;
   return index;