When a page is printed, a heading should be accompanied by an image to the right. I have defined the following stylesheet:
@media print {
h1::after {
content: url( IMAGE_URL_HERE );
position: absolute;
top: 0;
right: 0;
}
}
The issue arises when the image does not appear in the print preview of any browser. However, if the print preview dialog is closed and reopened, the image then displays correctly.
To replicate this problem yourself, you can visit: http://jsbin.com/gevefivi
Is there an error on my end causing this or is it expected behavior?
UPDATE: It seems that this may be due to a race condition within the printing engine's layout rendering process, as local images always display in Print Preview and are printed without issue.
UPDATE: It appears that the print engine does not wait for external resources in content: url() to load before generating the PDF file for preview. This explains why the image may not appear initially if the fetch process takes some time to complete. The print engine does send an HTTP request and saves the resource locally for future use, which clarifies why the image usually displays properly upon reopening Print Preview.
I conducted a test using a PHP file as an external resource:
<?php
sleep(5);
// Create a blank image and add some text
$im = imagecreatetruecolor(120, 20);
$text_color = imagecolorallocate($im, 233, 14, 91);
imagestring($im, 1, 5, 5, 'A Simple Text String', $text_color);
// Set the content type header - in this case image/jpeg
header('Content-Type: image/jpeg');
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
// Output the image
imagejpeg($im);
// Free up memory
imagedestroy($im);
This PHP file only returns an image after 5 seconds. To recreate the issue, ensure the PHP file is accessible on your local server or network. Reference it in content: url(), open the Print Preview dialog, and observe that the image does not appear. Close the dialog, reopen it, and the image still may not display. Wait 2-3 seconds, reopen the dialog, and the image should now be visible as it has been fetched and cached. Removing the sleep(5); line should result in the image displaying immediately upon opening Print Preview.
I am curious to determine whether this is a bug or simply expected behavior, and if there is a viable solution currently available.