Array.from() with HTMLcollection does not seem to work in Chrome browser

Question

I have a JavaScript piece of code that works on all browsers (even IE) but fail with Chrome on my HUAWEI P8 Lite with Android 6.

Chrome is version 71.0.3578.99.

The faulty code is var class_arr = Array.from(class); where class is a HTMLcollection.

It seems like Array.from() is failing although it should be supported by Chrome on mobile.

Also, I've noticed that this same code used to work one update ago, and not two updates ago strangely.

You can test the problem with this URL (of course this won't be valid as long as if I'll find a solution to my problem). You need to open the sidebar on the left and try to zoom in the map with the Plus or Minus button.

EDIT

Here is the code where I use 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 is first defined in another script as var class_layers = document.getElementsByClassName("layer");

EDIT 2

Ok, so apparently the problem is related to Chrome in general, not only on mobile. In fact, if you try the above URL in Chrome Desktop, you can reproduce the error by opening the sidebar (on the left), then closing it and pressing the + or - symbol to zoom in the map. I guess it has to do with the way click events are treated by either my code and OpenLayers. I am probably deleting this question as it sounds like I need to dig further in problematic.

SOLUTION

Not deleting because I think it maybe useful for others to see the solution.

Here is the link to the OpenLayers github issue I created and closed: https://github.com/openlayers/openlayers/issues/9105.

The problem was the event "change:resolution" fired by the View class of OL (v5.3.0) that is emitted multiple times during animation (problem also quoted here).

NEW CONSIDERATION

Turns out that I still had the problem on mobile devices. The real fix was not to use innerText in my code and switch to innerHTML, as it was always empty in (and only in) Chrome, while with the other browsers it was not (I could actually see the string). If you are interested I can try to provide an example, but unfortunately I could not find much on this problem in the web...

what about showing the code where you use `Array.from`? Pay attention that `Array.from` is not supported by Internet Explorer — quirimmo, Jan 08 '19 at 16:51
@quirimmo I added the code to my question. Also, thanks for pointing out IE support. I saw it, but I also saw the code working and I am more interested in modern browsers. — umbe1987, Jan 08 '19 at 16:57

score 0 · Answer 1 · edited Jan 08 '19 at 19:08

0

It's not Array.from() problem.

Check your class_elem variable It's undefined (because no element found for your conditions) and then it fails when your trying to get parentNode of undefined in:

export function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

edited Jan 08 '19 at 19:08

elbraulio

994
6
15

answered Jan 08 '19 at 18:45

Gleb Khudyakov

1
3

Thanks, however I still think it's due to Array.from() in the line just above not producing class_layers_array which in turn is causing the udefined cass_elem in the line just below. And again, this works in all other browsers, which is strange to me. – umbe1987 Jan 08 '19 at 21:48

Array.from() with HTMLcollection does not seem to work in Chrome browser

1 Answers1