У нас есть проблема, которая проявляется только в браузерах iOS (iOS 12.0) с нашим приложением SPA, которое использует теги объектов HTML для загрузки виджетов (файлов HTML / CSS / JS) через JavaScript на страницу.
Проблема является периодической, когда страница загружается, некоторые виджеты не отображаются / не отображаются на экране, но загружаются в DOM и могут просматриваться / выделяться с помощью полных свойств элемента в Safari.Веб-инспектор.но «невидимы» для своего пользователя.Проблема будет возникать примерно в 50% случаев, если на страницу загружается 4 виджета, обычно 2 не отображаются, а разные виджеты не отображаются каждый раз без обнаруживаемого шаблона.
События загрузки виджета JavaScript работают правильно, и в консоли нет ошибок.В веб-инспекторе Safari мы видим, что некоторые элементы HTML из объекта без рендеринга загружаются в позиции 0,0, но их стиль корректен в DOM (левый и верхний значения установлены правильно, display: inline и т. Д.).
Вот код, который загружает виджеты (фрагмент добавляется в DOM после настройки всех виджетов):
function loadWidget(myFrag, widgetName) {
var widgetObj = document.createElement("object");
widgetObj.data = "widgets/" + widgets[widgetName].type + ".html"; // location of widget
widgetObj.className = "widget unselectable";
widgetObj.id = widgetName;
widgetObj.name = widgetName;
myFrag.appendChild(widgetObj); // build widgets onto fragment
widgetObj.addEventListener("load", widgetLoaded, false); // Run rest of widget initialisation after widget is in DOM
widgetObj.addEventListener("error", badLoad, true);
}
Вот код в событии загрузки, который настраивает виджетпосле загрузки (мы работаем над ошибкой Chrome, которая также влияет на Safari, когда событие загрузки запускается дважды для каждого загруженного объекта):
function widgetLoaded(e) {
var loadObj = e.target;
if (loadObj === null) {
// CHROME BUG: Events fire multiple times and error out early if widget file is missing so not loaded (but this still fires), force timeout
return;
}
var widgetName = loadObj.id;
// CHROME BUG: Workaround here is to just set the style to absolute so that the event will fire a second time and exit, then second time around run the entire widgetLoaded
if ((parent.g.isChrome || parent.g.isSafari) && !widgets[widgetName].loaded) {
widgets[widgetName].loaded = true; // CHROME: WidgetLoaded will get run twice due to bug, exit early first time.
loadObj.setAttribute("style", "position:absolute"); // Force a fake style to get it to fire again (without loading all the other stuff) and run through second time around
return;
}
var defView = loadObj.contentDocument.defaultView; // Pointer to functions/objects inside widget DOM
loadObj.setAttribute("style", "position:absolute;overflow:scroll;left:" + myWidget.locX + "px;top:" + myWidget.locY + "px;z-index:" + zIndex);
loadObj.width = myWidget.scaleX * defView.options.settings.iniWidth; // Set the width and height of the widget <object> in dashboard DOM
loadObj.height = myWidget.scaleY * defView.options.settings.iniHeight;
}
Код работает правильно в Chrome (Mac / Windows), IE и Safari(Mac), однако, представляет проблему случайной невидимой загрузки в iOS Safari, а также в iOS Chrome.
Любые идеи, что является причиной этого и каким может быть обходной путь?