Translate3d causes blurry text on labels about leaflet.label HOT 6 CLOSED

Can you do up a jsfiddle that reproduces this? Also which browser are you using?

from leaflet.label.

I've tried to do but there is a problem with external resources.

The code is this:

var tileUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png';

var attribution = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>,<a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors.';

var tileMap = new L.TileLayer(tileUrl, {
    maxZoom: 18,
    attribution: attribution,
    detectRetina: true
});

var latlng = L.latLng(38.35323, -0.49215);

var map = L.map('map_canvas', {
    center: latlng,
    zoom: 13,
    layers: [tileMap]
});

var especial = L.markerClusterGroup();

var setComision = function (event) {
    return false;
};

L.marker([38.34326, -0.50832]).bindLabel('Florida Plaza la Viña', {
    noHide: true
}).on('click', setComision).addTo(especial).showLabel()._leaflet_id = 1;
L.marker([38.34236, -0.51459]).bindLabel('Florida Sur', {
    noHide: true
}).on('click', setComision).addTo(especial).showLabel()._leaflet_id = 2;
L.marker([38.34251, -0.51196]).bindLabel('La Florida', {
    noHide: true
}).on('click', setComision).addTo(especial).showLabel()._leaflet_id = 3;

map.addLayer(especial);

And this is the effect: http://s16.postimg.org/s2ubrgmf9/Captura_de_pantalla_2013_08_22_a_la_s_00_20_09.png

Marker of "Florida plaza la viña" is more blurry than the others, because both are just exit from cluster.

I've tested on Chrome, Safari, Safari iOs, Firefox, Android 4.2.2 browser and it happens only on Chrome, Safari and Safari iOs.

from leaflet.label.

I have the same problem after updating the leaflet version and leaflet.label version.

When labels are first added, they render fine, and keeps rendering fine when panning the map (because no update is done upon map event 'moveend')

However, when zooming, the labels get updated in a way that makes it render using hardware acceleration which in turn makes it render kind of 'blurry'.

See screenshot.
Left: Before zooming.
Right: After zooming in and out
http://s8.postimg.org/cy7thhuat/mazemap_blurred_labels.png

Reproduced on:
Chrome Version 28.0.1500.95
Safari Version 6.0.5 (8536.30.1)
Mobile Safari on iPhone

Tested, but issue is not visible on:
Firefox Version 23.0.1
IE9 on Win7 (Zoom animation gets disabled because lack of 3d-transform?)

Tested with interesting result:
IE10 on Win8 : Labels are blurred the short period of time when the map is doing animated zoom, but at the end of the zoom event, the labels are re-rendered shart as they should be.

from leaflet.label.

Forcing _updatePosition() in the _onMoveEnd() function makes the labels redraw correctly after a zoom-evend, but this seems to scale poorly, when having many labels as it shouldn't need to do it I guess...

from leaflet.label.

Finally got around to looking into this. You wouldn't believe the solution ;) The issue was the new pixel position of the label (after zoom) was not being rounded.

from leaflet.label.

Amazing fix! So simple, haha!

http://tmblr.co/ZA4Ymtx0camu

—
Sent from Mailbox for iPhone

On Tue, Oct 22, 2013 at 12:17 AM, Jacob Toye [email protected]
wrote:

Finally got around to looking into this. You wouldn't believe the solution ;) The issue was the new pixel position of the label (after zoom) was not being rounded.

Reply to this email directly or view it on GitHub:
#44 (comment)

from leaflet.label.