Bug 250685 – Safari does not respect width media query for printed media

• Status: NEW
• Component: CSS

[Ken]

Tested on Safari Version 15.0 (16612.1.29.41.4, 16612)

Issue:
Safari does not respect min-width, max-width or other size-based media queries for printed media. Instead, Safari is triggering size-based media queries based on the size of the browser window, rather than the size of the printed page. This is inconsistent with how other browsers behave and does not comply with the spec (https://www.w3.org/TR/mediaqueries-3/#width).

Steps to reproduce:
1. Open the example page (linked below) in Safari.
2. Resize the browser window until it is small enough that both boxes are black. Open the print dialog and you will see two black boxes in the print preview.
3. Resize the browser window until it is wide enough that one of the boxes becomes red. Open the print dialog and you will see two red boxes in the print preview.

Expected behavior:
If printing on US letter portrait, both boxes should be black. If printing on US letter landscape, both boxes should be red. The size of the browser window should not have any effect on the print version.


Minimal Reproducible Example:
https://codepen.io/ksugi/full/RwBZXLw

[Karl Dubost]

In https://www.w3.org/TR/mediaqueries-3/#width
> For paged media, this is the width of the page box (as described by CSS2, section 13.2 [CSS21]).

-> https://www.w3.org/TR/CSS22/page.html


There is also orientation and I do not have the feeling this is working either. 

```
@media print and (orientation: landscape) {
  .box2 {
    border-color: #f00;
  }
}
```

In https://w3c.github.io/csswg-drafts/mediaqueries/#orientation

and this 

```
@media print and (min-width: 21.1cm) {
  @page {
    size: A4 landscape;
  }
  .box2 {
    border-color: #f00;
  }
}
```


it has an effect but not on changing the orientation in the print menu. 


I wonder if the Print menu of the OS communicates back the change of layout to WebKit.

[Radar WebKit Bug Importer]

<rdar://problem/104568712>