Я создаю веб-сайт, который выводит контент для большой 2D-области из CMS, поэтому у меня есть система, которая работает по таймеру, исследует часть области, которая в данный момент отображается на экране, и загружает контент, который находится достаточно близко к области просмотра, чтобы она могла скоро появиться.
Кажется, что все это работает довольно хорошо, за исключением одного небольшого сбоя.
Часть моего контента - это элементы SVG, созданные процедурно через JS (механизм загрузки передает данные из CMS в функции JS, которые создают с использованием document.createElementNS и вставляют его в div в правильной абсолютной позиции).
Это содержимое выглядит нормально, если отображается на экране во время загрузки (это происходит при начальной загрузке страницы).
И это также отображается, если она загружена, когда анимация перемещает видимую область (анимация используется для следования по путям через 2D-пространство).
ОДНАКО, если я вручную перемещаю видимую область (которую я реализовал с помощью нажатия + перетаскивания), тогда SVG e Элементы добавляются в дерево документа, но когда они появляются, они не отображаются.
Если я что-то сделаю, чтобы "подтолкнуть" средство визуализации, например, скрыть несвязанный элемент через DevTools или немного изменить размер окна , затем они появляются.
Я думаю, что это может быть ошибка в Chrome? например, где он первоначально решил, что элементы не должны быть нарисованы, и не обрабатывается правильно, когда это требует пересмотра? Или, может быть, я что-то упускаю, я только немного опытен в манипулировании HTML документами через JS (но после быстрого просмотра я не вижу того же поведения в firefox ...)
Я перемещаю видимую область, изменяя (левый, верхний) родительского элемента (для этого я не хочу использовать прокрутку, поскольку размер 2D-пространства заранее не определен ...)
Иначе, есть ли способ заставить браузер пересчитать то, что должно быть нарисовано? Мне было интересно, чтобы на экране был маленький прозрачный элемент, который я показываю и скрываю по таймеру, хотя обходной путь, который в первую очередь предотвращает проблему, был бы предпочтительнее ...
Спасибо за любой совет!
Ian
ps Я не могу мгновенно создать демонстрационный код для этого, так как база кода умеренно велика, но я потрачу время, чтобы сделать более простой пример, если это окажется необходимым ...