Bug 250685 - Safari does not respect width media query for printed media
Summary: Safari does not respect width media query for printed media
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on: 15548
Blocks:
  Show dependency treegraph
 
Reported: 2023-01-16 12:31 PST by Ken
Modified: 2023-01-23 12:32 PST (History)
7 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Ken 2023-01-16 12:31:14 PST
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
Comment 1 Karl Dubost 2023-01-16 15:43:18 PST
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.
Comment 2 Radar WebKit Bug Importer 2023-01-23 12:32:19 PST
<rdar://problem/104568712>