I am currently working on formatting a page for printing in Internet Explorer. I have encountered an issue where when I select the "Print background and images" option in Page Setup and preview the page, only certain icons are displaying. However, all icons have the same styling applied.
The only notable difference between the icons is that they are sourced from a sprite. Despite this, the styling behaves as expected under normal circumstances.
Does anyone have any insights into what might be causing this issue or can provide guidance on where to look for a solution? :)
Thank you in advance.
Update: I'm not sure if this will be useful, but here is the corresponding style and HTML for the icons
<td style="height: 200px;">
<i class="icon1 px24" title="icon"></i>
<i class="icon2 px24" title="icon"></i>
<i class="icon3 px24" title="icon"></i>
<i class="icon4 px24" title="icon"></i>
</td>
And the style:
Each icon has positioning set to display the correct image from the sprite:
base-webkit-t-da.css:6062
i.icon1 {
background-position: -12em -8em;
}
General style:
base-webkit-t-da.css:6098
i.px24 {
font-size: 24px;
}
base-webkit-t-da.css:5664
i {
color: rgba(0, 0, 0, 0);
display: inline-block;
vertical-align: middle;
margin: 0;
text-indent: 10em;
width: 1em;
height: 1em;
font-size: 16px;
background-image: url(http://domain.o/img/domain/icons/icons.svg?v=(16.4%s);
background-repeat: no-repeat;
background-size: 20em;
background-position: -1em;
overflow: hidden;
-webkit-print-color-adjust: exact;
padding: 0!important;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
media="print"
base_print-webk…-da.css:7
* {
box-shadow: none!important;
}
base-webkit-t-da.css:43
* {
margin: 0;
padding: 0;
font-size: 1em;
}
user agent stylesheet
i, cite, em, var, address, dfn {
font-style: italic;
}
Inherited from td
base-webkit-t-da.css:1569
table.list td, table.grid td, table.list th, table.grid th {
padding: 2px 0.5em;
text-align: left;
}
...
Inherited from html.wf-proximanova-n7-active.wf-proximanova-i7-active.wf-proximanova-n4-active.wf-proximanova-i4-active.wf-active.lc-cb-container-vi
base-webkit-t-da.css:43
* {
margin: 0;
padding: 0;
font-size: 1em;
}
Update: Upon further investigation, we have discovered that Internet Explorer 11 (and potentially other IE browsers) are unable to display all images from our sprite file when printing. This appears to be a specific bug related to IE, as the icons are rendering correctly in Chrome and Firefox. As a workaround, we have decided to recommend users switch to a different browser for a better printing experience. Thank you to everyone for your assistance.