www.thule.com - site is not usable

[webcompat-bot]

URL: https://www.thule.com/en-ca/ca/dealer-locator

Browser / Version: Firefox Mobile 68.0 Operating System: Android 6.0.1 Tested Another Browser: Yes

Problem type: Site is not usable Description: Page becomes unresponsive Steps to Reproduce: Click on "Bike racks" category to get to the list of retailers.

Once the list is loaded, try to scroll down or click on "View map"

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20190903070031
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: true
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: false
• channel: nightly

Console Messages:

[u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]', u'[JavaScript Warning: "Error: WebGL warning: texImage2D: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads." {file: "https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js" line: 29}]']

Submitted in the name of @ksy36

From webcompat.com with ❤️

[karlcow]

on rdm, I'm even getting stuck before this step.

There is even an error message every 2 seconds in the console.

08:50:52.614
Error: "The layer 'cluster-count' does not exist in the map's style and cannot be styled."
    setLayoutProperty style.js:779
    setLayoutProperty map.js:1354
    auditClustering mapbox.js:1
    addIdleStateListener mapbox.js:1
    setInterval handler*addIdleStateListener/< mapbox.js:1
    fire evented.js:121
    _render map.js:1721
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
    _render map.js:1719
    _frame map.js:1770
    frame browser.js:31
    triggerRepaint map.js:1768
evented.js:136:20

[karlcow]

Before there was also this message

Invalid X-Frame-Options: “ALLOWALL” header from “https://www.locally.com/conversion?company_name=Thule&inline…&inline=1&company_id=49&lang=en-CA&host_domain=www.thule.com” loaded into “https://www.thule.com/en-ca/ca/dealer-locator”.

in evented.js

    fire(event: Event, properties?: Object) {
        // Compatibility with (type: string, properties: Object) signature from previous versions.
        // See https://github.com/mapbox/mapbox-gl-js/issues/6522,
        //     https://github.com/mapbox/mapbox-gl-draw/issues/766
        if (typeof event === 'string') {
            event = new Event(event, properties || {});
        }

        const type = event.type;

        if (this.listens(type)) {
            (event: any).target = this;

            // make sure adding or removing listeners inside other listeners won't cause an infinite loop
            const listeners = this._listeners && this._listeners[type] ? this._listeners[type].slice() : [];
            for (const listener of listeners) {
                listener.call(this, event);
            }

            const oneTimeListeners = this._oneTimeListeners && this._oneTimeListeners[type] ? this._oneTimeListeners[type].slice() : [];
            for (const listener of oneTimeListeners) {
                _removeEventListener(type, listener, this._oneTimeListeners);
                listener.call(this, event);
            }

            const parent = this._eventedParent;
            if (parent) {
                extend(
                    event,
                    typeof this._eventedParentData === 'function' ? this._eventedParentData() : this._eventedParentData
                );
                parent.fire(event);
            }

        // To ensure that no error events are dropped, print them to the
        // console if they have no listeners.
        } else if (event instanceof ErrorEvent) {
            console.error(event.error);
        }

        return this;
    }```

[karlcow]

This need to be continued.

[wisniewskit]

This page is actually working for me as it does in Chrome, though there aren't many bike racks/etc in my location. Maybe it's a region-specific error, due to certain map data not being available everywhere?

The "layer not found" error message @karlcow was running into kind of implies that might be it, as it seems to essentially be site error caused by incomplete MapBox documentation. I don't see any such error (or other interesting ones) in the original report, though.

[karlcow]

@ksy36 does it work now for you?

[karlcow]

And confirmed for @wisniewskit if I change the location to be Toronto instead of Tokyo. I get the menu. And the map is showing.

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.

[ksy36]

It doesn't freeze anymore, though I still have an issue with "Retailers section", it's not scrollable. To reproduce:

1. Click on "Bike racks" category (it'll automatically transfer to Retailers section)
2. Try to scroll the retailers list

This is not reproducible in Chrome. Also if I click different sections, go to the map, etc. and then go back to Retailers section, the list becomes scrollable. We should probably reopen this

[karlcow]

from Japan, I get a repeating error message, every 2 seconds, on rdm. when accessing https://www.thule.com/en-ca/dealer-locator

08:52:04.661
Error: "The layer 'cluster-count' does not exist in the map's style and cannot be styled."
    setLayoutProperty style.js:828
    setLayoutProperty map.js:1848
    auditClustering mapbox.js:1
    addIdleStateListener mapbox.js:1
    setInterval handler*addIdleStateListener/< mapbox.js:1
    fire evented.js:125
    _render map.js:2264
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
    _render map.js:2258
    _frame map.js:2317
    frame browser.js:35
    triggerRepaint map.js:2314
evented.js:140:20

https://api.tiles.mapbox.com/mapbox-gl-js/src/util/evented.js

        // To ensure that no error events are dropped, print them to the
        // console if they have no listeners.
        } else if (event instanceof ErrorEvent) {
            console.error(event.error);
        }

called by https://api.tiles.mapbox.com/mapbox-gl-js/src/style/style.js

    setLayoutProperty(layerId: string, name: string, value: any,  options: StyleSetterOptions = {}) {
        this._checkLoaded();

        const layer = this.getLayer(layerId);
        if (!layer) {
            this.fire(new ErrorEvent(new Error(`The layer '${layerId}' does not exist in the map's style and cannot be styled.`)));
            return;
        }

        if (deepEqual(layer.getLayoutProperty(name), value)) return;

        layer.setLayoutProperty(name, value, options);
        this._updateLayer(layer);
    }

this is happening because layerId value is cluster-count but this.getLayer(layerId) returns undefined.

note that i get the same error message in chrome. Basically they didn't take into account the fact there could be no vendors in the area you are living in.

To avoid this let's set new york as a place. and let's go back to the scrolling issue.

@ksy36 on a pixel 2 with the latest firefox preview nightly, I can scroll.