1

There's an Amazon.com page that does not render in print preview and shows up blank (it is the Online Return Center\Your Return Summary page). Through a lot of trial and error on a local saved copy of the page I found the culprit in some buggy linked stylesheet that was making everything hidden during a print preview...

@media print {
    body *, header {
        visibility: hidden;
    }
}

However back at the original website I'm struggling to locate that source from the live page in the developer tools. Where can I look up this sort of structure from the developer tools and override it so that the print preview renders as expected?

What I've tried

So far from the Elements view I'm searching for all link rel="stylesheet" hits and manually following all the hrefs to the css and searching for keyword print. That wound up working, but when I delete the link tag and go back to the page to print I still get the same blank page. Maybe it's a server side bug?

Here's the link found in the head section

<link rel="stylesheet" href="https://images-na.ssl-images-amazon.com/images/I/01WIasbg6mL._RC|014yivy0BxL.css_.css?AUIClients/PREXWebAppBuzzAssets-confirmationPage">

What can I do locally to remove this bad css?

Here's the preview I'm talking about blank print preview page

jxramos
  • 7,356
  • 6
  • 57
  • 105

2 Answers2

1

From the comments on the author's answer:

For a single remove-and-print, you could try to force Chrome to use the screen styles even when it would normally use print by reversing the steps in the linked answer.

If using Chrome Open up developer tools, click on the 3 vertical dots in the top right corner, go to More tools --> Rendering revealing the Rendering tools dev tool page

Then locate the Emulate CSS media type list box and select Screen. Trigger a print and review the print preview and inspect if the content renders as expected and proceed to print.

selecting css media type emulation for screen

jxramos
  • 7,356
  • 6
  • 57
  • 105
D M
  • 5,769
  • 4
  • 12
  • 27
  • I'm trying to hunt down an equivalent in Safari, not sure if they have similar overrides. Aha, looks like this is the closest thing https://css-tricks.com/can-you-view-print-stylesheets-applied-directly-in-the-browser/#aa-in-safari. Maybe not however, there mode is `Force Media Print Styles` button, but when I do that I see the white background because the print styles is the broken thing on this Amazon page. There's no cross-over mode that I can see like Chrome has. I want to force screen because the print preview style is broken. – jxramos Mar 15 '23 at 01:14
0

Oh wait, I'm not sure what I failed to do previously but when I just right clicked the link tag in the Elements view of the developer tools and selected Delete element the preview now works as expected. That wound up deleting the entire effects of the whole stylesheet, I wonder if there's a more nimble way to just cut out that select @media print portion

jxramos
  • 7,356
  • 6
  • 57
  • 105
  • 1
    For a single remove-and-print, you could try to [force Chrome to use the `screen` styles](https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode/21156904#21156904) even when it would normally use `print` by reversing the steps in the linked answer. – D M Feb 03 '21 at 01:47
  • That emulation on screen did the trick! Post an answer and I'll accept it and upload some screenshots to it. – jxramos Feb 04 '21 at 23:29