Leaflet/Leaflet.label

Offsets seem broken and markers shrink with PhantomJS

lgo opened this issue · 2 comments

lgo commented

Using PhantomJS screen capture to PDF, page.render, things seem to go bad. I'll look into the problem and try to make a sample page where this is reproducible when running PhantomJS on it.

Most notably all of the marker labels are lined up in display: block; fashion in the upper-right and the markers seem to get the same width attribute as the label from inspection.

The bit of code which uses Leaflet.Label is

    marker.bindLabel(e.label, {
      direction: 'left',
      noHide: true,
      offset: [(e.label || "").length * -4 /* right */, -40 /* down */]
    });
    marker.showLabel();

although varying and removing options seem to not affect the issue.

leafletlabelbug

PhantomJS 1.9.8
Leaflet.Label 0.2.2-dev

lgo commented

It seems the markers shrinking in width is caused specifically by having CSS media type print and is unrelated to PhantomJS, while the labels going to the corner is specific to PhantomJS.

The labels showing in the topleft seem to be caused by the transform: translate3d not working as intended from within PhantomJS.

MattSidor commented

Can you post a snippet of all the relevant css for these markers?