Делаю карту посёлка на Canvas
denisator.ru/work/map/test и столкнулся с проблемой на мобильном Хроме и Опере.
Если в Хроме щепоткой увеличить карту и отскролить её вниз то указатель, который должен перемещаться в точку нажатия пальцем, позиционируется где то в стороне. Причём такая проблема проявляется только в опере и хроме, а в стандартном браузере андроида и в файрфоксе всё работает нормально.
Пробовал компенсировать это смещение но не смог вычислить формулу по которой считать величину смещения.
<!DOCTYPE html>
<html lang="ru"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<script src="jquery-latest.js"></script>
</head>
<body>
<div id="info"><img src="ugolok.png"><span id="text">Какой нибудь <br> динамический текст</span></div>
<figure id="imapc">
<object data="map.svg" type="image/svg+xml" id="imap">
<p>К сожалению, вы используете устаревшую версию браузера, который не поддерживает интерактивную карту.</p>
</object>
</figure>
<div id="data"></div>
<script>
$(window).load(function () {
// Получаем доступ к SVG DOM
var svgobject = document.getElementById('imap');
if ('contentDocument' in svgobject){
var svgdom = svgobject.contentDocument;
}
// Хак для WebKit (чтобы правильно масштабировал нашу карту)
var viewBox = svgdom.rootElement.getAttribute("viewBox").split(" ");
var aspectRatio = viewBox[2] / viewBox[3];
svgobject.height = parseInt(svgobject.offsetWidth / aspectRatio);
size=svgobject.offsetWidth;
$(svgdom).on("mousemove", function(event) {
//Проблемное место!!!
//var scale=($(document).width())/(window.innerWidth);
//$("#info").offset({top:(event.pageY+20+(window.pageYOffset*scale)), left:(event.pageX+23+window.pageXOffset)});
$("#info").offset({top:(event.pageY+20), left:(event.pageX+23)});
});
});
</script>
<style>
html, body {width: 100%; height: 100%; margin:0px; padding: 0px;}
#imapc {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
border: 0;
}
#imap{
margin: 0;
padding: 0;
}
div#info {
position: absolute;
border: 1px solid black;
background: #FFFFCC;
padding: 6px;
font-family: Arial;
//display: none;
border-radius: 0px 12px 12px 12px;
box-shadow: 0 0 10px rgba(0,0,0,0.8);
}
div#info img{
position: absolute;
top: -18px;
left: -22px;
}
</style>
</body></html>
