スケール変更した領域でドラッグ操作したい（座標がズレる）

動いているコード
https://jsfiddle.net/jydv5k6s/

cssのtransform:scaleを1にするとちゃんと機能します

.area{ transform: scale(1.1); /* scale変えると座標がズレる */ }

scaleを1.1などの数値でエリアを拡大すると右下へドラッグするとどんどんマウスカーソルと画像がズレてきます

cssのzoomも同様です

マウスドラッグとスケール変更は共存できない仕様なのでしょうか？
拡大率の分をドラッグ時に計算するにしてもイマイチ公式的なものがわからず詰まっています
ご教示いただければ幸いです