Leaflet cluster group background color does not appear in map print export

Question

I have a Leaflet map with a L.markerClusterGroup. It looks like this:

But when printing (to PDF), it looks like this:

Notice the absence of background colour.

The points are created as follow:

L.DivIcon({ html: '<div><span>' + (childCount + tally) + '</span></div>', className: 'marker-cluster' + <my own css>, iconSize: new L.Point(40, 40) });

Where "my own css" are css classes that may be either of following:

background: rgba(255, 0, 192, 0.3); !important;
border: 1px solid #666;

Or

background: rgba(9, 243, 33, 0.6);!important;
border: 1px solid #666;

Anyone else ever had the same issue?

You have checked that your web browser gives you an option to keep backgrounds when printing, and that option is set to the right value, right? — IvanSanchez, Aug 19 '16 at 09:19
IvanSanchez: yes I have and also followed the answer in this thread: http://stackoverflow.com/questions/2392366/print-background-colours-in-chrome — Fred Campos, Aug 19 '16 at 12:15
Try [emulating CSS media](http://stackoverflow.com/questions/21247583/not-able-to-find-emulate-css-media-in-google-chrome) and see if there any print-specific changes in your CSS, maybe that'll give you more info. — IvanSanchez, Aug 19 '16 at 13:01
Which browser do you use? I see that all your other backgrounds are not rendered (look at the zoom and layers controls) — ghybs, Aug 19 '16 at 15:58

score 1 · Accepted Answer · answered Aug 24 '16 at 13:35

My problem was bad CSS. background: rgba(255, 0, 192, 0.3); !important; instead of background: rgba(255, 0, 192, 0.3) !important;.

Here's the working CSS:

@media print {

  .my-own-css1, .my-own-css2, {
        -webkit-print-color-adjust: exact !important;         
         background: rgba(255, 0, 192, 0.3) !important;
    }
}

Leaflet cluster group background color does not appear in map print export

1 Answers1