Mapbox-gl-js: Map displays labels on a diagnoal

[Juarrow]

mapbox-gl-js version: 1.8.0

browser: Chrome, Edge, Firefox

Steps to Trigger Behavior

1. Create a map as in the tutorial.

Link to Demonstration

https://codepen.io/Incubbus/pen/BaNQGLW

Expected Behavior

A map with correct label positioning.

Actual Behavior

A map where labels are all on one diagonal.

Additional Info

When using 1.7.0 it works.

[clshortfuse]

Getting this on a Windows 10 and Windows 7 PC. I'm guessing it's driver issue because they both share Intel HD drivers.

[Rosoyuki]

I have the same problem. In all examples of the website. Chrome, Firefox, Opera.
PD: Internet explorer displays normal.

[Juarrow]

As @clshortfuse mentioned, it may happen mostly on windows. Though an acquaintance told me he had this issue appear on his iPhone with an earlier version (1.7,x i think) in an Ionic app.
When accessing the 1.8.0-map on an Ionic-test-App on my Android phone, the issues does not appear. But i cannot ascertain, that this is not happening on other Android phones/versions...

This is a little terrifying, considering people use this for their production-grade products, too).

[pakastin]

Some of our clients are having the exact issue with latest Chrome, Windows 10 and Intel HD Graphics 4600 card:

..and another client as well:

https://aviamaps.com/map (using the latest version of Mapbox GL JS)

v1.7.0 version seems to work alright

[akx]

If 1.7.0 works fine, then if you have the faulting hardware at hand, you can help debug this with a Git Bisect process. (I only have Nvidia and/or Macs, so I can't help here.)

$ git bisect start
$ git bisect bad v1.8.0
$ git merge-base v1.8.0 v1.7.0
74b15736d414023345abab69b91995d949f7d11e
$ git bisect good 74b15736d414023345abab69b91995d949f7d11e
Bisecting: 23 revisions left to test after this (roughly 5 steps)

You'd basically build the library on each commit, run the test and tell Bisect whether it was git bisect good or git bisect bad, and you eventually end up with the single commit that broke things.

[pakastin]

@Incubbus, @clshortfuse or @Rosoyuki could you try which commit breaks symbols like @akx suggested?

[clshortfuse]

@pakastin I'll give it a shot later today.

The issue presents itself with both TeamViewer and AnyDesk. I haven't tried Remote Desktop, which I will later on today, which will cement if it's a hardware-level (drivers) bug or software (RDP is software-based rendering).

Edit: The machine I can remotely test needs to run 32-bit Node, but is running 64-bit Windows. I'm getting node-gyp errors and I'm sure it's from that. I'll have to try on another machine later today.

[mourner]

Thanks a lot for the report and all the helpful comments, everyone! Looking into this urgently.

I just looked through commits between v1.7.0 and v1.8.0 and the most suspicious seems to be this one https://github.com/mapbox/mapbox-gl-js/commit/1eed2ae8290f5a069284958708787bc2159e329f — can anyone try doing git revert 1eed2ae8, making a new build and seeing if it helps on the affected Windows machine? If it's not the culprit, git bisect should reliably find one, even though it will take longer.

[karimnaaji]

We have tried a few windows machine with no luck. As @mourner suggested we've prepared a build which does not have the potential offender commit. We'll dig further if that doesn't end up being the culprit.

If anyone can confirm that the issue is not visible for one of the offending machine on this example that'd be great help!

https://jsfiddle.net/kanaa/30hfqcko/3/

[Juarrow]

We have tried a few windows machine with no luck. As @mourner suggested we've prepared a build which does not have the potential offender commit. We'll dig further if that doesn't end up being the culprit.

If anyone can confirm that the issue is not visible for one of the offending machine on this example that'd be great help!

https://jsfiddle.net/kanaa/30hfqcko/3/

The issues does not occur on the fiddle - if that's what you're asking (Chrome, Edge, Firefo & Opera), .

(At the moment i don't have the time to bisect the commits - maybe during the next weekend.)

[karimnaaji]

Thanks @Incubbus, that confirms that the regression was introduced by this specific commit as the build used by this jsfiddle reverts it.

[pakastin]

Good to know, I’ll revert that commit on my custom build as well then 👍

[karimnaaji]

@pakastin could you also confirm if the issue is fixed with the revert?

[matthias-burgfried]

It now works correctly again. Tested on Windows 10 (Firefox and Edge).

[pakastin]

Could someone verify if https://aviamaps.com/map works now? I didn't have the issue and would like to have bug fixed soon, since Aviamaps has quite critical use cases.. Thanks!

[pakastin]

I already got verification that it works now, thank you! 🎉

[asheemmamoowala]

it works now

@pakastin @matthias-burgfried Do you mean that you are not seeing this bug from these browsers on the v1.8.0 release? Or is it not reproducing when testing with the jsfiddle (https://jsfiddle.net/kanaa/30hfqcko/3/) posted in https://github.com/mapbox/mapbox-gl-js/issues/9327#issuecomment-590463478 ?

[pakastin]

I reverted that specific commit and clients verified it works now, didn’t work on v1.8.0 before I reverted https://github.com/mapbox/mapbox-gl-js/commit/1eed2ae8290f5a069284958708787bc2159e329f

Actually Aviamaps is running master + revert, so everything after v1.8.0 also works.

[ahk]

Closing this because #9340 fixes this and has merged.

[mpulkki-mapbox]

Thanks for reporting the issue!

I managed to reproduce the bug with an old Windows 8.1 laptop (Intel HD 4000) after updating graphics drivers to the latest available. I'm suspecting a bug in the glsl shader compiler that is possibly related to code optimization. I came into that conclusion after observing the following behavior.

The bug can be triggered in both symbol_icon.vertex.glsl and symbol_sdf_vertex.glsl by modifying gl_Position in a branch after it has once been set by the shader. The following (seemingly harmless) code is a simple example that should have no effect on vertex positions but will trigger the bug.

    if (projected_pos.w == 123456435457765875856347.90) {
        gl_Position.x = 0.0;
    }

(Interestingly enough, the diagonal placement is fixed by setting segment_angle and symbol_rotation to zero before creating the rotation matrix.)

This is the simplest working vertex shader (symbol_icon.vertex.glsl) that is still causing the issue:

void main() {
    #pragma mapbox: initialize lowp float opacity

    vec2 a_offset = a_pos_offset.zw;

    // 45 degree test angle
    mat2 rotation_matrix = mat2(0.707, -0.707, 0.707, 0.707);

    vec4 projected_pos = u_label_plane_matrix * vec4(a_projected_pos.xy, 0.0, 1.0);

    gl_Position = u_coord_matrix * vec4(projected_pos.xy / projected_pos.w + rotation_matrix * (a_offset / 32.0), 0.0, 1.0);

    // Uncomment following lines to break the shader.
    // (Set rotation matrix to identity to fix it.)
    //if (projected_pos.w == -1234567.89)
    //  gl_Position.x = 10.5;
}

I managed to pinpoint the cause to the vector swizzling in this line:

gl_Position = u_coord_matrix * vec4(projected_pos.xy / projected_pos.w + rotation_matrix * (a_offset / 32.0), 0.0, 1.0);

The bug is fixed on my test rig by replacing the following expression projected_pos.xy / projected_pos.w with a more verbose one vec2(projected_pos.x / projected_pos.w, projected_pos.y / projected_pos.w). The bug can be replicated as well by writing vec2(projected_pos.y / projected_pos.w, projected_pos.y / projected_pos.w) (y-component twice).

[clshortfuse]

@mpulkki-mapbox Nice.

I suspected driver issues. Intel HD drivers are a bit notorious for awkward OpenGL rendering. If you ever want to get into obscure rendering bugs, I'm reminded of this article by the Dolhin Emulator devs.

I have a couple of devices that exhibit other artifacts that I expect are related to OpenGL bugs. Samsung devices seem to use the wrong color for text depending on zoom/elevation. That goes as far back as v1.6.0. I have a user with an Alcatel JOY TAB that will straight up crash randomly. I tried to debug with logcat and there were some OpenGL-related rendering errors. I'm going to wait to see if 1.9.0 fixes those, and if not, start filing bug reports.

[kkaefer]

@clshortfuse if you have a way to reproduce bugs, please share them with us. A new version doesn't magically fix things; we actually have to do the work 😛

[kkaefer]

https://github.com/mapbox/mapbox-gl-js/releases/tag/v1.8.1 released.