META: I asked this question over at Webmasters Stack Exchange, but they booted it, and told me to ask here. Apparently Webmasters only ever want to talk about SEO. Original Post:
I am having a VERY strange issue with Chrome on the Mac.
I have this page: https://heartoflongislandna.org/cleantime/
It's a simple JS app that takes a date, calculates a time difference, then displays a bunch of mortised transparent PNG images that display awarded keytags. These overlap each other in two layouts:
Vertical, where one is laid over another in a vertical "chain," and
Horizontal, where they are placed side by side, but overlapping, like a spread out deck of cards.
What is happening, is that the layouts display (and print) fine in Safari and FF, but in Chrome, the print screws up. The screen display is fine, and looking at it with the device pane set to print also shows them fine.
There is also a small PNG image that is added to some of the images to close the ring at the top. That is added as a top, center background image.
The vertical layout is a bit better than the horizontal, in that the background transparency is honored, but the background image is lost (top keytag).
The horizontal layout is a mess. The background image is not displayed, and the background transparency is not honored.
I will add that examining this with Chrome's device view panel set to "Print" does not show a problem. It looks great. The print preview shows the issue, and opening the image in Preview also shows the problem, which is in the renderer.
*UPDATE 2: This is now available as a fiddle, here: http://jsbin.com/kakirinife/edit?html,output
The (Fiddle) HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Issue Demo</title>
<style type="text/css">
/** This is the container for the keytag display. */
.NACC-Keytags {
margin-top: 122px;
display: table;
margin-left: auto;
margin-right: auto;
background-color: transparent;
}
/** This allows us to compensate for the automatic offset of the tags. */
.NACC-Keytag-Tabular {
margin-top: 82px;
padding-right: 50px;
text-align:left;
}
/** This describes a keytag image layout. */
.NACC-Keytag {
width: 100px;
max-width:100px;
overflow: visible;
margin-top:-122px;
display: block;
margin-left: auto;
margin-right:auto;
background-color: transparent;
}
/** If we are displaying a closed ring, then we add an image to the background. */
.NACC-Keytag.NACC-Keytag-Ringtop {
background-image: url('https://i.stack.imgur.com/QcEYN.png');
background-position: center top;
background-size: 100%;
background-repeat: no-repeat;
background-attachment: local;
}
/** We display inline-block, so we get a flow that will wrap. */
.NACC-Keytag-Tabular .NACC-Keytag {
display: inline-block;
margin-top:-82px;
margin-right:-50px;
}
</style>
</head>
<body>
<div class="NACC-Results">
<div class="NACC-Keytags NACC-Keytag-Tabular">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag NACC-Keytag-Ringtop" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
<div class="NACC-Results">
<div class="NACC-Keytags">
<img class="NACC-Keytag NACC-Keytag-Ringtop NACC-White-Tag" src="https://i.stack.imgur.com/AVIug.png">
<img class="NACC-Keytag" src="https://i.stack.imgur.com/j11kj.png">
</div>
</div>
</body>
</html>
</body>
The Images:
UPDATE: I determined that this is likely a Chrome bug, and I reported it, but I am still looking for a CSS fix that I can apply. Chrome is a popular browser.
I will add images that show what happens.
First, this is the vertical format on the screen:
Next, here is the horizontal image on the screen:
Now, here are both of them as printed:
