Mapbox - strange white line in layers

Question

I'm embedding a mapbox map - what I found is that a blank line is put in the middle of the map, as you can see from the attached image.

Does anyone know what the problem is?

I'm using twitter-bootstrap framework too.

and this is the map div html/css I use:

<div class="map"></div>

    .map{
        max-width:none !important;
        width:100% !important;
        height:250px !important;
        max-height:250px;
        position: relative;
        margin:0 auto !important;
    }

and this is my js:

var map = mapbox.map(_element);
map.addLayer(mapbox.layer().id('examples.map-uh4ustwo'));

// Create an empty markers layer
var markerLayer = mapbox.markers.layer();

// Add interaction to this marker layer. This
// binds tooltips to each marker that has title
// and description defined.
mapbox.markers.interaction(markerLayer);
map.addLayer(markerLayer);

map.zoom(3).center({ lat: _json.lat, lon: _json.lon });

// Add a single feature to the markers layer.
// You can use .features() to add multiple features.
markerLayer.add_feature({
    geometry: {
        coordinates: [_json.lon, _json.lat]
    },
    properties: {
        'marker-color': '#F96363',
        'marker-symbol': 'circle-stroked',
        /*title: 'Example Marker',
        description: 'This is a single marker.'
        */
    }
});

thanks.

Answer 1

First, check that you don't have any 'responsive images' stuff turned on, which will mess with the size of map images.

Then, try not using !important so much.

Finally, check that your browser isn't zoomed in or out. In Chrome, hit ⌘0.

Answer 2

The problem is related to the fact that by default leaflet.js uses CSS3 3D transformations to position the tiles and some combinations of OS and browsers can't handle that properly.

The solution is to disable 3D transforms before loading the actual library:

<script>L_DISABLE_3D = true;</script>
<script src="mapbox.js"></script>

That solved the problem of white lines for me in Firefox for Bootstrap/Mapbox app