vis js timeline chart background can not be printed

Question

I have a vis js timeline chart. It has background and images for vis-item-content:after in style sheet.

The timeline chart can display in browser correctly with background style. But when I try to print by clicking "file-->Print" in browser. The background is just blank.

1. type: 'background' is blank
2. vis-item-content:after  
   background: url("https://image.flaticon.com/icons/svg/306/306470.svg");  is also blank

view from browser

but in print preview. All backgrounds are blank

I know I can change browser setting to show "background color and images". But for customers, they may not know how to do this. We need to change our code to show the background color and images.

I need your help on how to make the background showing up at print preview.

Thanks.

Here is the sample http://visjs.org/examples/timeline/items/backgroundAreas.html

or

https://jsfiddle.net/gbdjbdhv/58/

var items = new vis.DataSet([
    {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'},
    {id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'},
    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
  ]);


.vis-item-content:after {
                width: 40px;
                height: 40px;
                background-color: transparent;
                background: url("https://image.flaticon.com/icons/svg/306/306470.svg");
                background-size: 40px 40px;
                content: "";
                position: absolute;
                z-index: 2 !important;
            }

Answer 1

see this answer and this:

With Chrome and Safari you can add the CSS style -webkit-print-color-adjust: exact; to the element to force print the background color and/or image.

This is beginning to work in Firefox (at least version 48.0.2) with the "color-adjust" property.

This should work in most modern browsers:

.vis-item-content:after {
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
}