Интересный глюк в Chrome + css transitions
Сегодня столкнулся с интересным глюком в хроме (Ubuntu, Chrome 40.0.2214.111 (Official Build)), связанным с Яндекс.Картами.
Суть проблемы: был рабочий код, который по значению текстового инпута (input) выполняет поиск координат с помощью геокодера (GeoCoder) и выставляет плейсмарк (Placemark) на карте, что-то типа этого:
var yGeocoder = ymaps.geocode(addressString,{results:1});
yGeocoder.then(function(res) {
// на самом деле метка не создается каждый раз, здесь приведен упрощенный код
var geoTag = new ymaps.Placemark(
res.geoObjects.get(0).geometry.getCoordinates(),
{
balloonContent : 'Укажите точное расположение'
},
{
draggable : true
}
);
map.geoObjects.add(geoTag);
mapContainer.show(); // отобразить карту (изначально скрыта)
});
При нажатии на кнопку, карта становится видимой, и на ней отмечается точка. Проблема в том что после последнего коммита приложение начало зависать, а память потихоньку утекать в небытие, соответственно в диспетчере видим такую картину:
Причем проблема выявилась только на Chrome.
Проведя полный анализ кода, узких мест с утечками обнаружено не было, однако проблема, как оказалось, была и не в нем — проблема обнаружилась в CSS:
/* из-за этого то в хроме глючит яндекс карта */
.tarif-container * {
transition: all 0.3s ease-out 0s;
}
.tarif-container .map-container {
display: none;
}
Протестировал это на других браузерах (естественно с префиксами) — карта при подгрузке областей, конечно, вырвиглазит, метки перетаскиваются плавно и медленно, но память течь не начинает.
А как вы думаете, это баг или фича?