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 1eed2ae — 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 👍