У меня есть фрагмент кода JavaScript, который работает во всех браузерах (даже IE), но не работает с Chrome на моем HUAWEI P8 Lite с Android 6.
Chrome - версия 71.0.3578.99.
Неисправный код var class_arr = Array.from(class);, где class - это HTMLcollection.
Похоже, что Array.from () не работает, хотя он должен поддерживаться Chrome на мобильных устройствах .
Кроме того, я заметил, что этот же код работал одно обновление назад, а не два обновления назад, как ни странно.
Вы можете проверить проблему с помощью этого URL (конечно, это будет недействительно, если я найду решение своей проблемы). Вам нужно открыть боковую панель слева и попытаться увеличить карту с помощью кнопки «Плюс» или «Минус».
EDIT
Вот код, в котором я использую Array.from ():
export function updateSlider(all_sliders, ol_layers, class_layers) {
// updates slider with the actual opacity of the layers
for (var i = 0, len_i = all_sliders.length; i < len_i; ++i) {
var curr_slider = all_sliders[i];
// get layer from ol_layers whose title is equal to current slider id
// Find the value of the first element/object in the array, otherwise undefined is returned
// (https://stackoverflow.com/a/13964186/1979665)
var lyr = ol_layers.find(obj => {
return obj.values_["title"] === curr_slider.getAttribute("id")
});
// get class_layer (layerswitcher) from class_layers whose title is equal to current slider id
// (first we need to convert class_layers from HTMLCollection to array otherwise .find will fail)
var class_layers_arr = Array.from(class_layers);
var class_elem = class_layers_arr.find(obj => {
return obj.innerText.replace('\t','') === curr_slider.getAttribute("id")
});
// get current layer opacity and set it as the value of current slider
var curr_opacity = lyr.values_["opacity"];
curr_slider.setAttribute("value", curr_opacity);
// create new li element
var li_elem = document.createElement("LI");
// add slider input to li elem
li_elem.appendChild(curr_slider);
// add li with layer legend after layer li
insertAfter(li_elem, class_elem);
changeOpacity(curr_slider, ol_layers);
}
}
class_layers сначала определяется в другом скрипте как var class_layers = document.getElementsByClassName("layer");
РЕДАКТИРОВАТЬ 2
Хорошо, так что, видимо, проблема связана с Chrome в целом, а не только на мобильном телефоне. Фактически, если вы попробуете вышеуказанный URL-адрес в Chrome Desktop, вы можете воспроизвести ошибку, открыв боковую панель (слева), затем закрыв ее и нажав символ + или -, чтобы увеличить карту. Я думаю, это связано с тем, как события click обрабатываются либо моим кодом, либо OpenLayers. Я, вероятно, удаляю этот вопрос, так как мне кажется, что мне нужно копать дальше в проблемных.
РЕШЕНИЕ
Не удаляет, потому что я думаю, что другим было бы полезно увидеть решение.
Вот ссылка на созданную и закрытую проблему OpenLayers Github: https://github.com/openlayers/openlayers/issues/9105.
Проблема заключалась в событии «изменение: разрешение», которое вызывается классом представления OL (v5.3.0), который генерируется несколько раз во время анимации (проблема также указана здесь ).
НОВОЕ РАССМОТРЕНИЕ
Оказывается, у меня все еще была проблема на мобильных устройствах.
Реальным решением было не использовать innerText в моем коде и переключиться на innerHTML, так как он всегда был пустым (и только в) Chrome, в то время как с другими браузерами это было не так (я мог видеть строку). Если вам интересно, я могу привести пример, но, к сожалению, я не смог найти много по этой проблеме в Интернете ...