diff --git a/packages/topdown/src/persea/room-sides/tiles-side/index.jsx b/packages/topdown/src/persea/room-sides/tiles-side/index.jsx
index d84e178..a386454 100644
--- a/packages/topdown/src/persea/room-sides/tiles-side/index.jsx
+++ b/packages/topdown/src/persea/room-sides/tiles-side/index.jsx
@@ -170,9 +170,7 @@ function TilesPage({
     }
     const onValue = (
       {
-        clientX,
-        clientY,
-        target,
+        position,
         type,
       },
     ) => {
@@ -180,11 +178,7 @@ function TilesPage({
       switch (type) {
         case 'touchstart':
         case 'mousedown': {
-          const {left, top} = target.getBoundingClientRect();
-          const clamped = Vector.mul(
-            tileSize,
-            Vector.floor(Vector.div([clientX - left, clientY - top], tileSize)),
-          );
+          const clamped = Vector.mul(tileSize, Vector.floor(Vector.div(position, tileSize)));
           setIncident(clamped);
           setSelection(Rectangle.compose(clamped, tileSize));
           setIsHolding(true);
@@ -193,12 +187,7 @@ function TilesPage({
         case 'touchmove':
         case 'mousemove': {
           if (isHolding) {
-            const {left, top} = target.getBoundingClientRect();
-            const tileSize = [16, 16];
-            const clamped = Vector.mul(
-              tileSize,
-              Vector.floor(Vector.div([clientX - left, clientY - top], tileSize)),
-            );
+            const clamped = Vector.mul(tileSize, Vector.floor(Vector.div(position, tileSize)));
             const min = Vector.min(clamped, incident);
             const max = Vector.max(clamped, incident);
             setSelection(Rectangle.compose(min, Vector.add(tileSize, Vector.sub(max, min))));
@@ -304,7 +293,7 @@ function TilesPage({
                 ref={onRef}
                 renderer={renderer}
                 renderable={container}
-                scalable={false}
+                scale={1}
                 size={viewport}
               />
             </div>