Полное зависание окна браузера при использовании API Яндекс.Карт — неожиданные причины и решение
Invite pending
Хочу рассказать вам об одной нетривиальной проблеме, которая возникла при встраивании Яндекс.Карт в простенький лендинг.
Суть проблемы заключается в том, что по неведомым вначале причинам страница проекта после загрузки вызывала полное зависание вкладок любого браузера на любой ОС (а Edge и Internet Explorer вообще умирали целиком). Началось всё после того, как я полностью закончил вёрстку макета и занялся установкой карт Яндекса в подвал. Выглядит это вот так:
После первой установки и обнаружения проблемы я предположил, что загвоздка кроется в изменённом балуне, который мне пришлось самостоятельно модифицировать для вывода информации об автобусах и троллейбусах (Яндекс не предоставляет этой информации через АПИ, что кажется очень удивительным). Код, который я использовал:
Однако удаление результатов моей самодеятельности не помогло решить проблему — страница по-прежнему зависала вместе с браузером сразу после загрузки. Я даже не имел возможности банально посмотреть ошибки в консоли яваскрипта. Тем не менее, методом тыка было обнаружено, что проблема исчезает, если встраивать карту без использования любых балунов (не важно, открыты они изначально или закрыты). «Уже что-то», — подумал я и продолжил гуглить информацию по своей проблеме, однако нигде ничего даже близко похожего не нашёл.
Совсем отчаявшись и потратив на разбор этого бага примерно часа два, от безысходности я начал ковыряться во всём, что так или иначе имеет отношение к макету. И сам не знаю каким чудом, но обратил внимание на этот кусок CSS:
Мне известно, что лучше не использовать глобально такие свойства, но я всё же позволял себе делать это для мягкой анимации различных переходов и изменения цвета, если страница не сильно перегружена элементами управления и кнопками. Удалил этот кусок без особой надежды на успех. О чудо! Страница перестала зависать, карты стали отлично грузиться и всё заработало так, как должно.
Для сомневающихся я приготовил пример на JSFiddle с дефолтным кодом встраивания Яндекс.Карт с балуном, взятым из официальной песочницы и кодом для глобальных анимаций в CSS. Страница зависнет сразу после загрузки карт.
Если кто-нибудь из прочитавших статью знает, почему это вообще происходит, буду признателен за объяснение.
Спасибо за внимание!
Суть проблемы заключается в том, что по неведомым вначале причинам страница проекта после загрузки вызывала полное зависание вкладок любого браузера на любой ОС (а Edge и Internet Explorer вообще умирали целиком). Началось всё после того, как я полностью закончил вёрстку макета и занялся установкой карт Яндекса в подвал. Выглядит это вот так:
После первой установки и обнаружения проблемы я предположил, что загвоздка кроется в изменённом балуне, который мне пришлось самостоятельно модифицировать для вывода информации об автобусах и троллейбусах (Яндекс не предоставляет этой информации через АПИ, что кажется очень удивительным). Код, который я использовал:
ymaps.ready(init);
var myMap,
myPlacemark;
function init(){
myMap = new ymaps.Map("map", {
center: [53.909442,27.518061],
zoom: 15,
controls: ['zoomControl']
});
myMap.balloon.open(
// Позиция балуна
[53.910594,27.517106], {
contentBody: 'улица Скрыганова, 6А, офис 306',
contentHeader: 'MHELP.BY',
contentFooter: 'Остановка «Улица Пинская»<br/>
<div style="background: url(https://yastatic.net/maps-beta/_/2XqdjYF8AFGKoFR1CIw9M4k8Z4c.svg) left no-repeat; padding-left: 25px; font-weight: bold; margin-top: 5px;">Автобусы:</div>
<div style="background: #eee; border-radius: 10px; padding: 5px; text-align: center; margin-top: 5px;">163, 40, 46, 50с, 78</div>
<div style="background: url(https://yastatic.net/maps-beta/_/AdmP0yxnlQsPwV_0yYc2FUuZvwc.svg) left no-repeat; padding-left: 25px; font-weight: bold; margin-top: 5px; margin-bottom: 5px;">Троллейбусы:</div>
<div style="background: #eee; border-radius: 10px; padding: 5px; text-align: center;">13, 4, 44, 57, 7, 9</div>'
}, {
closeButton: false
});
}
Однако удаление результатов моей самодеятельности не помогло решить проблему — страница по-прежнему зависала вместе с браузером сразу после загрузки. Я даже не имел возможности банально посмотреть ошибки в консоли яваскрипта. Тем не менее, методом тыка было обнаружено, что проблема исчезает, если встраивать карту без использования любых балунов (не важно, открыты они изначально или закрыты). «Уже что-то», — подумал я и продолжил гуглить информацию по своей проблеме, однако нигде ничего даже близко похожего не нашёл.
Совсем отчаявшись и потратив на разбор этого бага примерно часа два, от безысходности я начал ковыряться во всём, что так или иначе имеет отношение к макету. И сам не знаю каким чудом, но обратил внимание на этот кусок CSS:
*{
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
Мне известно, что лучше не использовать глобально такие свойства, но я всё же позволял себе делать это для мягкой анимации различных переходов и изменения цвета, если страница не сильно перегружена элементами управления и кнопками. Удалил этот кусок без особой надежды на успех. О чудо! Страница перестала зависать, карты стали отлично грузиться и всё заработало так, как должно.
Для сомневающихся я приготовил пример на JSFiddle с дефолтным кодом встраивания Яндекс.Карт с балуном, взятым из официальной песочницы и кодом для глобальных анимаций в CSS. Страница зависнет сразу после загрузки карт.
Если кто-нибудь из прочитавших статью знает, почему это вообще происходит, буду признателен за объяснение.
Спасибо за внимание!