Mapbox-gl-js: Fix vertical and horizontal artifacts on Firefox

[yuvadm]

Getting these rendering artifacts on OS X + Firefox:

Code is built on the examples from the docs:

var mapStyle = {
    "version": 8,
    "name": "Dark",
    "sources": {
        "mapbox": {
            "type": "vector",
            "url": "mapbox://mapbox.mapbox-streets-v6"
        },
    },
    "sprite": "mapbox://sprites/mapbox/dark-v8",
    "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    "layers": [
        {
            "id": "background",
            "type": "background",
            "paint": {"background-color": "#111"}
        },
        {
            "id": "boundaries",
            "source": "mapbox",
            "source-layer": "admin",
            "type": "line",
            "paint": {"line-color": "#797979"},
            "filter": ["all", ["<=", "admin_level", 2], ['==', 'maritime', 0]]
        },
        {
            "id": "water",
            "source": "mapbox",
            "source-layer": "water",
            "type": "line",
            "paint": {"line-color": "#797979"}
        },
        {
            "id": "cities",
            "source": "mapbox",
            "source-layer": "place_label",
            "type": "symbol",
            "layout": {
                "text-field": "{name_en}",
                "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
                "text-size": {"stops": [[4, 9], [6, 12]]}
            },
            "paint": {
                "text-color": "#969696",
                "text-halo-width": 2,
                "text-halo-color": "rgba(0, 0, 0, 0.85)"
            }
        },
        {
            "id": "states",
            "source": "mapbox",
            "source-layer": "state_label",
            "type": "symbol",
            "layout": {
                "text-transform": "uppercase",
                "text-field": "{name_en}",
                "text-font": ["DIN Offc Pro Bold", "Arial Unicode MS Bold"],
                "text-letter-spacing": 0.15,
                "text-max-width": 7,
                "text-size": {"stops": [[4, 10], [6, 14]]}
            },
            "filter": [">=", "area", 80000],
            "paint": {
                "text-color": "#969696",
                "text-halo-width": 2,
                "text-halo-color": "rgba(0, 0, 0, 0.85)"
            }
        }
    ]
};

var map = new mapboxgl.Map({
    container: 'map',
    maxZoom: 10,
    minZoom: 2,
    zoom: 6,
    center: [35, 32],
    style: mapStyle,
    hash: false
});

[lucaswoj]

I created a preview out of the example code here.

Was not able to repro the bug on my OSX + Firefox setup. Could you tell me a little more about your system @yuvadm? Would you mind sharing the model # of your computer?

[lucaswoj]

Are you using the latest version of mapbox-gl-js? (v0.11.2)

[yuvadm]

Repros for me on the jsfiddle as well, and yes I'm on v0.11.2

What details do you need? This is a mid-2010 13" MBP running OS X 10.9.5

[lucaswoj]

@yuvadm Are you only seeing these artifacts in Firefox? Are Chrome or Safari affected?

[yuvadm]

@lucaswoj chromium is not affected, similar to #1680

[yuvadm]

Another nice sample taken from https://reactmaps.firebaseapp.com/

[jingsam]

mapbox-gl-js v0.20.1 windows 10 chrome 51

mapbox-gl-js v0.11.0 windows 10 chrome 51

[timiyay]

I've also encountered these line artifacts when using Mapbox's Static Image API. The resulting JPG images can sometimes have the same tile seam lines.

So whatever Mapbox uses to render their own tiles is likely suffering from the same bug.

[andrewharvey]

Looks like the same issue as I'm having here https://github.com/mapbox/mapbox-gl-js/issues/2676 though for me I see the issue on Chrome.