Member Avatar for peepster

Hi there, I have a print button on the bottom of my page so that the user can print the page. I also have a print css style sheet so the images/colors aren't visible and the user can just print the text.

When I click the button in Safari 5.0.2 (for mac), part of the page "whites out" when the print dialog box pops up, and then when I hit "preview" the preview page looks fine, but the scrollbar on the website disappears. I then have to "refresh" the browser for the scrollbar to reappear.

Any ideas? Could it be something in the CSS Print Stylesheet? Works great in every other browser except for Safari.

Thanks!

  • 2 Contributors
  • 1 Reply
  • 260 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by akvlko

Dani AI

Generated

As described, opening Safari's print dialog causes part of the page to “white out” and the site scrollbar to vanish until a refresh. is right that invoking the browser print API and using a dedicated print stylesheet is the right approach; the disappearing scrollbar, however, is usually caused by print-media CSS or a WebKit repaint/reflow interaction rather than the print call itself.

Troubleshooting checklist (quick, ordered checks):

  • Temporarily disable the print stylesheet (use Safari’s Develop → Show Web Inspector after enabling the Develop menu in Preferences → Advanced) to confirm whether the print CSS is the trigger.
  • Inspect any print rules that touch html, body or large containers — look for height:100%, overflow:hidden/auto, or position:fixed set in the print rules. Those commonly remove/shift scrollbars when print styles apply.
  • Remove or neutralize transforms and hardware-acceleration tricks (transform, -webkit-transform, -webkit-overflow-scrolling) in the print stylesheet; composited layers can confuse WebKit’s print rendering.
  • Build a tiny reduced test page with the same layout pieces and add parts back until the problem reproduces — that isolates the offending rule.

Safe print overrides that often help (add to the print stylesheet):

@media print {
  html, body { height: auto !important; overflow: visible !important; }
  .fixed, .site-header, .site-footer { position: static !important; }
  * { -webkit-transform: none !important; transform: none !important; }
}

If the scrollbar still stays hidden after returning from preview, force a repaint/reflow on the page after printing (onafterprint / matchMedia) as a pragmatic workaround:

if ('onafterprint' in window) {
  window.onafterprint = function () {
    document.documentElement.style.display = 'none';
    document.documentElement.offsetHeight;
    document.documentElement.style.display = '';
  };
}

Common resolution patterns: neutralize fixed/transform styles in print, force a reflow after print, or reproduce in a minimal test case to find the single offending rule. If the issue only appears in an old Safari build it may be a WebKit bug — testing on another mac/Safari version helps decide whether to file a bug report.

Member Avatar for akvlko

Hi there, I have a print button on the bottom of my page so that the user can print the page. I also have a print css style sheet so the images/colors aren't visible and the user can just print the text.

When I click the button in Safari 5.0.2 (for mac), part of the page "whites out" when the print dialog box pops up, and then when I hit "preview" the preview page looks fine, but the scrollbar on the website disappears. I then have to "refresh" the browser for the scrollbar to reappear.

Any ideas? Could it be something in the CSS Print Stylesheet? Works great in every other browser except for Safari.

Thanks!

use javascript:window.print();

made a css for print link it into your page with media type print

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.