Клуб API Карт

Клуб API Карт

Срабатывание события Update при скрытии/показе карты в IE

Пост в архиве.

Здравствуйте,

Столкнулся со странным поведением карты в Internet Explorer (как минимум в 8-м). У меня есть табы (jquery UI), на втором табе сделана карта. Соответственно, при переключении табов карта то показывается, то скрывается. При первом показе она инициализируется, а после инициализации уже не меняется (специальный флаг map_dirty = false) — то есть просто показывается/скрывается.

Во всех браузерах всё ок, а вот в ... (слова ненависти) Internet Explorer как всегда какие-то особенности. При каждом скрытии/показе карты почему-то срабатывают события Update.

Пример можно посмотреть тут (откройте в FF а потом в IE): http://jsfiddle.net/beholder/C86cV/embedded/result/

Тут можно увидеть сам код: http://jsfiddle.net/beholder/C86cV/

При первом показе карты срабатывает функция showMap - выскакивает алерт. Потом, после переключения табов ничего не должно происходить (Update срабатывается только при зуме карты). Но в IE постоянно выскакивают алерты о событии Update.

Как с этим бороться? Как видите, при этом и карта почему-то смещается в левый верхний угол.

6 комментариев
Авторизуйтесь, чтобы оставить комментарий
thekashey
28 января 2016, 05:48

событие приосходит из-за ресайза окна

вопросов итого два

- почему происходит ресайз окна

- как избежать эффекта скролинга

насчет первого не скажу - смотреть надо

второе решается относительно просто - в коде активации таба - сделаете setCenter(getCenter())(образно говоря)

и получите не плавыный скрол карты, а скачкообразный, практически не заметный

beholdr
28 января 2016, 05:48
Спасибо за комментарий. Окно вроде бы не ресайзится — только карта скрывается/показывается. При этом особенность именно IE (думаю, возможно какой-то хак в недрах YMaps, так как с гугл картами такого не происходит, насколько я знаю).

На самом деле всё еще хуже, чем просто этот скролл. Я привел данный кусочек — а в моей системе, с которой возникли проблемы — всё несколько сложнее. Там еще метки ставятся и вычисляются bounds для карты. Так вот в IE при переключении табов не только происходит скролл карты, но иногда и масштаб улетает на уровень планеты — тогда и меток не видно.

То, что вы предлагаете, если я правильно понял, не помогает. Вот пример дополненный: http://jsfiddle.net/beholder/84sW7/

Я в табы вставил код:

if ($.browser.msie) {
  map.setCenter(map.getCenter());
}

Но все равно скролл плавный. Видимо, это событие отрабатывает асинхронно и поймать его трудно. Но еще раз повторяю, что скролл — это лишь внешнее проявление проблемы. Главная же проблема в том, что событие вообще вызывается.
thekashey
28 января 2016, 05:48

карты биндятся на window.resize и ждут этого самого ресайза.

после чего говорят себе map.update

Но они в этот момент уже скрыты, и шрина\высота у них 0\0

Bounds фактически схлопывается в точку.

Можно решить эту проблему немного по другому:

1.разместитите на табе некий див где должна быть карта

2.разместите карту как position:absolute где-то в документе.

3.при включении таба - перенесите данные по offset\width\height дива заглушки на див карты, и она приедет в таб.

При выключении карты - поставьте ей visibility:hidden или унесите на -9999 вверх\влево.

пример - http://www.gdeetotdom.ru/obj/living/msk/5997442632/

beholdr
28 января 2016, 05:48

Спасибо за совет, попробую. У меня была  идея насчет нулевого размера и visibility:hidden, но о переносе карты по размерам не догадался.

Кстати, ваш пример тоже «стрейфится» в IE при яндекс.картах.

thekashey
28 января 2016, 05:48

потому что заводиться display:none

а если as-is заводить в visibility - в опере фантастика начнется( вестка блоков такая)

решили там пожертвовать немного IE

beholdr
28 января 2016, 05:48

Ура, сработало =)

Сделал position:absolute, margin-top: -{height}px и visibility:hidden, а по табу просто переключаю видимость. Во всех браузерах полёт нормальный, события не срабатывают. Спасибо еще раз за идею.

Результат (может кому пригодится): http://jsfiddle.net/beholder/84sW7/1/embedded/result/