Исчезают Яндекс-карты при ресайзе экрана?

Question

[Danila232]

На сайте есть Табы - 3 вкладки. В каждой вкладке есть своя Яндекс-карта со своими координатами, кликаешь по Табу - меняется Карта.
Но вот такая штука - когда происходит хоть какое-то изменение размера экрана(по ширине или высоте) - ПРОПАДАЮТ все Карты, кроме активной, открытой в данный момент. Можете проверить сами, нажмите по какой-либо вкладке, немного измените размер экрана, и понажимайте на другие вкладки - Карт не будет.

Код: https://codepen.io/Vegan-AK/pen/WNmoKKW

Как решить эту проблему? Нашёл какую-то яндекс.функцию для решения проблем при ресайзе, но не понял как она работает, и куда её прописывать:
function ResizeMapFit() {
myMapDev.container.fitToViewport();
}

Comments

[IvanU7n]

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

Answer 1

[IvanU7n]

типа такого в конец init():

const observer = new ResizeObserver(entries => mapArray.forEach(map => map.container.fitToViewport()));
  tabItems.forEach(node => observer.observe(node));

но нужно будет переделать неактивные табы, т.к. ResizeObserver реагирует и на display: none;

Comments

[Danila232]

Спасибо большое. Я и так, и так попробовал, но display: none; тоже вроде всё работает
ResizeObserver это вроде такой js инструмент для отслеживания сужения DOM-элементов. Нужная вообще вещь, часто используется?

[IvanU7n]

Danila232, ну если перезагрузка карты при переключении табов не мешает, то можно и display:none; оставить
как имя говорит, это отслеживатель изменения размеров элементов, подробности: https://developer.mozilla.org/en-US/docs/Web/API/R..., используется по необходимости, как например в картах, которые сами не умеют в такое