Skip to content
GitLab

Specified media type in media queries, fixes a bug in safari when printing

Closed Administrator requested to merge github/fork/ghusse/safari-print into master

Created by: ghusse

Fixes a bug in safari when printing content.

It seems some styles dedicated to screen applies in safari when printing.

Here is how to reproduce the bug:

  1. Create a simple HTML document like this one: http://ghusse.com/bootstrap-bug/
  2. Print it with safari, chrome, Firefox, IE

In Chrome, the result is similar to the result on screen:

chrome

In Safari, something weird happens:

  • The page is truncated on the right
  • Font sizes are smaller

bug-safari

With this fix, everything works great in safari too

safari-fixed

If you want to test, here is the buggy version: http://ghusse.com/bootstrap-bug/ And here the fixed one: http://ghusse.com/bootstrap-bug/nobug.html

The fix consists to specify the media type (screen) on each media query specifying a min-width.