Mapbox-gl-js: fitBounds randomly throw failed to invert matrix

[nrako]

Encountered on versions 0.21.0 && 0.25.1

Sorry about the "randomly issue", hard to reproduce, and I believe it's a size / timing issue. Which is also why I got fed-up with trying to debug it and just have hanging breakpoints waiting for next occurrences.

I'm sharing my finding hoping someone can help pin-point the root issue.

Transform.latY(lat, worldSize) Sometimes receive a lat of -90 and then return Infinity. (Is that expected???)

const y = 180 / Math.PI * Math.log(Math.tan(Math.PI / 4 + lat * Math.PI / 360));

This results is then used (through this.y) to calculate the matrices:
https://github.com/mapbox/mapbox-gl-js/blob/master/js/geo/transform.js#L455

Resulting in NaN which end up raising the failed to invert matrix https://github.com/mapbox/mapbox-gl-js/blob/master/js/geo/transform.js#L467

I don't yet understand why latY() randomly receives lat: -90, but this all start with fitBounds with options: linear: true, a padding and offset.

[tmcw]

Hi Nicholas,

Thanks for reporting this issue! Could you pull together a jsfiddle that shows the issue, or provide a complete code snippet of your integration code? And specify what browsers this issue appears on?

Thanks,

• Tom

[nrako]

Hi Tom,

This is happening on Safari Version 10.0 (11602.1.50.0.10) and Chrome (54.0.2840.71).

Regarding a jsfiddle that show the issue, I'm afraid I can't or not easily. This is more or less random and only happens on some specific conditions. That said I'll try to get back to this and pull together a jsfiddle.

But it would really help me build will to do that 🙏🏽, if somebody can confirm that the following is expected for latY(). Because even with my very limited comprehension, this doesn't look right:

let lat = -90
expect(latY(lat)).to.be(-Infinity)

[mourner]

@nrako next time this is triggered, can you extract the call trace (the chain of function calls that lead to latY with lat = -90)?

[nrako]

@mourner thanks for your help, I wish I could isolate the root cause I'm think I'm doing something wrong but can't pint point what.

The bundle is built with mapbox-gl 0.21.0 but I have the same issue in 0.25.1.

(anonymous function)    @   VM20209:1
evaluate
_calcMatrices           @   mapbox-gl.bundle.js:36736
set center              @   mapbox-gl.bundle.js:36440
setLocationAtPoint      @   mapbox-gl.bundle.js:36516
(anonymous function)    @   mapbox-gl.bundle.js:38957
(anonymous function)    @   mapbox-gl.bundle.js:39218
tick                    @   mapbox-gl.bundle.js:2779
requestAnimationFrame (async)       
exports.frame           @   mapbox-gl.bundle.js:2751
tick                    @   mapbox-gl.bundle.js:2780
requestAnimationFrame (async)       
exports.frame           @   mapbox-gl.bundle.js:2751
tick                    @   mapbox-gl.bundle.js:2780
requestAnimationFrame (async)       
exports.frame           @   mapbox-gl.bundle.js: 2751
tick                    @   mapbox-gl.bundle.js: 2780

toLngLat = {"lng":4.394181233333313,"lat":44.01333223374033}
fromPoint = {"x":3259230.626962026,"y":-5406962.913019736}
toPoint = {"x":206.5,"y":366}
fromPoint = {"x":3259230.626962026,"y":-5406962.913019736}

options = {"offset":[0,-33.5],"duration":500,"padding":41.3,"maxZoom":null,"linear":true,"center":{"lng":4.394181233333313,"lat":44.01333223374033},"zoom":5.6954682781259205,"bearing":0}"

[mourner]

That's very helpful, thanks! I wonder if doing _constrain before calculating matrices would help with the issue...

[nrako]

That do help! Did that change and got a breakpoint on set center when center.lat is -90 and this time calculating matrices didn't raised.

Trying to reproduce it to understand it a bit more, but now I have a hard time reproducing it...
UPDATE: Confirmed it helps.

[pgollangi]

Getting this issue if sw and ne bounds of LngLatBounds are same. I'm able to reproduce with following code

var sw = new mapboxgl.LngLat(-73.9876, 40.7661);
var ne = new mapboxgl.LngLat(-73.9397, 40.8002);
var llb = new mapboxgl.LngLatBounds(sw, ne);
map.fitBounds(llb);

[elishaterada]

Same problem, I was using geolocation API to get geolocation of my laptop on two separate Chrome windows running same code. In most cases they return same geo coordinates (not surprising) and that throws an error when I try to extend bounds and then use fitBounds method. This might be a rare case but a device using geolocation connected under same Wi-fi could run into this issue.

1. Get new bounds: var bounds = new mapboxgl.LngLatBounds()
2. Extend the bound on iteration: bounds.extend([value.longitude, value.latitude])
3. At last, fit bounds: map.fitBounds(bounds)

[mollymerp]

@elishaterada @prasanna-kumar what you're describing is a duplicate of #3307
@prasanna-kumar I cannot reproduce w the example you provided https://jsfiddle.net/4ztjmtoj/

[ArntB]

This might bee an other error but the end result is the same. I modified the jsFiddle a bit so you can reproduce:

https://jsfiddle.net/4ztjmtoj/15/

I have added a zoom in and a zoom out button to help trigger the bugg.
If you click the zoom inn button. Then after it has zoomed to the bounds you zoom inn with the scroll wheel. Then click the zoom out button. This reproduces the bug 100% of the time for mee in Chrome, firefox and IOS safari.

We have also noticed that the map moves to the south pole when this happens. If you drag the map it start working again. An you can then zoom inn and out again.

[mourner]

@ArntB the JSFiddle is using v0.21.0. Can you try the master version?

[ArntB]

Updated with v0.26.0 https://jsfiddle.net/4ztjmtoj/16/
Stil same problem

[nrako]

@ArntB v0.26.0 is currently 141 commits behind master, the fix hasn't been released yet.

[ArntB]

Do you have a cdn link to the master build?

[thiagoxvo]

I am having the same issue.
Do you have a cdn link to the master build? [2]

[mourner]

The fix is in the 0.27 release now.

[mollymerp]

@keyofj do you have the map's maxBounds set? can you set up a minimal jsbin.com or similar reproducing the issue?

[santinogue]

I'm still seeing this issue at v0.37.0. It doesn't happen always but after zooming in and out and calling fitBounds once and again it happens.

[anandthakker]

@santinogue any chance you could create a simple jsfiddle example that demonstrates this? I haven't managed to reproduce it on the examples previously shared on this ticket.

[santinogue]

@anandthakker I tried in a jsfiddle (https://jsfiddle.net/snoguera/hqp1zceL/1/) but couldn't reproduce the error. I don't know which other actors are in play here , only calling fit bounds and zoom in/out doesn't seem to be the way to trigger the issue in that map, it does in my local environment.

[rulyotano]

If it helps, I also get the same error on random occasions when making zoom in/out. First is raised a failed to invert matrix error, and then, on every action in the map, for instance moving the mouse over, is raised this error: Invalid LngLat object: (NaN, NaN). Call Stack for this last error:

lng_lat.js:29 Uncaught Error: Invalid LngLat object: (NaN, NaN)
    at new LngLat (lng_lat.js:29)
    at Transform.coordinateLocation (transform.js:352)
    at Transform.pointLocation (transform.js:329)
    at e.unproject (map.js:559)
    at h (bind_handlers.js:155)
    at HTMLDivElement.a (bind_handlers.js:81)

Seems that the problem in this last error is when trying to convert the point to coordinate, in the line return this.coordinateLocation(this.pointCoordinate(p)) the this.pointCoordinate(p) is returning Coordinate {column: NaN, row: NaN, zoom: NaN}. It is difficult to reproduce the error, because it is random, if any new detail I will update this post or create a new one.

Details of failed to invert matrix error:

Uncaught Error: failed to invert matrix
    at Transform._calcMatrices (transform.js:549)
    at Transform.prototypeAccessors.zoom.set (transform.js:165)
    at ScrollZoomHandler._onScrollFrame (scroll_zoom.js:237)
    at e.i._updateCamera (camera.js:901)
    at e._render (map.js:1464)
    at map.js:1567

The line:

    // inverse matrix for conversion from screen coordinaes to location
    m = mat4.invert(new Float64Array(16), this.pixelMatrix);
    if (!m) throw new Error("failed to invert matrix");
    this.pixelMatrixInverse = m;

Question, what about if this.pixelMatrix isn't invertible? Has that any logic? @mollymerp