Having a print-friendly CSS issue with Chrome and IE/MS Edge browsers… images in the page won’t render in the print preview dialog, but canceling out and immediately trying to print again (CTRL + P) the images will show up.
Images will render in Mozilla Firefox on first try every time, however.
Anybody got a simple fix for this?
Do you have an example we can look at?
Have you confirmed it isn’t an issue on your end, i.e. have you tested it on another system?
It happens with any Win10 machine using Chrome or IE.
So… doing a simple CTRL+P to print from these browsers, the first attempt will show all the text on the page, but no image (which is a standard PNG in this case). However, immediately cancelling the print dialog/preview, and hitting CTRL+P again, the image will render properly.
Firefox print preview renders the image immediately. IE and Chrome will only render it only on successive attempts.
Is there a specific reason you believe it to be a CSS issue? Does it work without the CSS print stylesheet?
As said, without an example it’s a little hard to say much. But off the top of my head, I’m not really aware of any issue with the two browsers that would cause this. Have you tried searching for this issue?
Yeah, there are posts out there talking about Chrome/IE print preview not allowing enough time in the DOM to render the image on the first try.
My print CSS file references this…
h1:before {display: block; content: url(“some-image.png”);}
…but that image isn’t actually included anywhere in the web page, since this is only for printing.
Kind of strange, however. Other images actually in the web pages will print. So I’m guessing that these two browsers don’t like my CSS… at least on the first try when hitting CTRL+P.
OK, that makes more sense. I can reproduce it.
Giving the element with the content image a position: relative property seems to work, at least in Chrome.
Mannn, I wish that worked, but still the same. Cleared browser cache on multiple machines… same behavior.
Thinking I need to retool this CSS, or somehow include the image in the HTML of the web page without actually showing it in the web page, haha. Because display:none in my global stylesheet would still hide it from my print.css stylesheet.
Hope I haven’t troubled you too much.!
No trouble at all.
I didn’t actually test it with a pseudo-element, sorry I totally missed that part. I can still reproduce this issue using a pseudo-element. In Firefox I don’t see the image getting fetched at all, but it still works. In Chrome, I see the fetch happen when you Ctrl + P but it doesn’t show up on the print page preview.
BTW, I didn’t try printing but I assume it is missing on the printed page and not just the preview?
Yes, sir… that is correct! Only when the print preview renders it on the second attempt will it actually print out on a printer.
Is there a better way for me to include that image reference within my print.css stylesheet?
This just seems like buggy behavior.
I can fix it using preload for the image, but that isn’t really a good solution unless you have very few images.
<link rel="stylesheet" media="print" href="style.css" />
<link rel="preload" href="test.png" as="image" />
Yeah, it’s really strange… Can we show an alternate image in print.css? - #5 by PaulOB - HTML & CSS - SitePoint Forums | Web Development & Design Community …and this discussion is covering almost the exact issue!
Check out comment #5 from July 16…
" Are you sure its working?
(In my tests (in Chrome) ](Background Image Print Test) the image is not loaded the first time you try and print the page. If you try a second time then the image appears.
The image seems to need to be in cache before the print is selected. The only way I can see that that will happen is by loading it by default in the main stylesheet and hiding it offscreen and then just revealing it in the print stylesheet. This of course means the image is loaded when it may never be needed."
Kind of sad that thread is from 2016. I guess no one has reported this issue. Or it’s working as intended (spec-compliant). Although personally, I believe it’s a bug.
I will let you know if I figure something else out. But for now, it seems the images have to be fetched (I guess cached), either loaded in the HTML and hidden, or using preload.
Yeah, I definitely think you’re right.
Stillll thinkin… hmmmm…
I don’t think there is a CSS fix for this. The resource is literally missing at the time of the preview, the preview causes the resource to be fetched but it’s too late. Or the preview relies on cached resources.
There might be a JS solution to this, but I didn’t really think about it or try anything. You can likely load the images on something like the beforeprint event (not tested).
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeprint_event
Still it isn’t a very good solution.
Right on, man. The behavior that it won’t show the first time is odd, since Firefox handles it with no problem. Anyway, I added this in a template file…
<div><img src="/folder/folder/css/some-image.png" style="display:none;"/></div>
…right below the header region, and that fixed the issue with Chrome. To hell with IE for now, haha.
Adding it too far down in the code of a CMS template file will show the same no print preview on first try, however.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.