Почему на мобильном по разному работает зум canvas в хроме и файрфокс?

denisator · June 16, 2017

Делаю карту посёлка на 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>

Николя223 · June 16, 2017

тестовую страницу сделайте нормально. может дело вообще в событии

Sign In

Почему на мобильном по разному работает зум canvas в хроме и файрфокс?

Question

denisator

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

Николя223

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information