[bug] documentPictureInPicture window does not apply appropriate display-mode: picture-in-picture CSS media tag
Nobody has claimed this yet.
- Dominant language
- Rust
- Stars
- 111k
- Forks
- 4k
- Avg merge
- 2d 1h
- Merged PRs (30d)
- 44
Description
Describe the bug
As the title says, it seems that Tauri on Windows does not render the appropriate @media (display-mode: picture-in-picture) CSS rules correctly for documentPictureInPicture pop-outs. It works on Windows both on Edge and Chrome according to the spec, but for some reason Tauri does not load / render the CSS rules correctly.
Reproduction
Run the example from MDN in a Tauri app on Windows: https://mdn.github.io/dom-examples/document-picture-in-picture/
A PiP window will open correctly, but it won't show the "mute" button according to the CSS rules. An even simpler way to reproduce would be opening a documentPiP window with the following CSS code:
@media (display-mode: picture-in-picture) {
body {
background: red;
}
}
Now opening any element in a window.documentPictureInPicture window should have a red background on Tauri, but does not.
Expected behavior
The PiP window should render all @media (display-mode: picture-in-picture) rules, like it does on Chrome & Edge on Windows.
Full tauri info output
[✔] Environment
- OS: Windows 10.0.19045 x86_64 (X64)
✔ WebView2: 130.0.2849.56
✔ MSVC: Visual Studio Community 2022
✔ rustc: 1.79.0 (129f3b996 2024-06-10)
✔ cargo: 1.79.0 (ffa9cf99a 2024-06-03)
✔ rustup: 1.27.1 (54dd3d00f 2024-04-24)
✔ Rust toolchain: stable-x86_64-pc-windows-msvc (default)
- node: 20.15.0
- npm: 10.7.0
[-] Packages
- tauri 🦀: 2.0.1
- tauri-build 🦀: 2.0.1
- wry 🦀: 0.44.1
- tao 🦀: 0.30.3
- @tauri-apps/api : 2.0.3
- @tauri-apps/cli : 2.0.5
[-] Plugins
- tauri-plugin-os 🦀: 2.0.1
- @tauri-apps/plugin-os : 2.0.0
- tauri-plugin-shell 🦀: 2.0.1
- @tauri-apps/plugin-shell : not installed!
- tauri-plugin-process 🦀: 2.0.1
- @tauri-apps/plugin-process : 2.0.0
- tauri-plugin-updater 🦀: 2.0.2
- @tauri-apps/plugin-updater : 2.0.0
- tauri-plugin-window-state 🦀: 2.0.1
- @tauri-apps/plugin-window-state : 2.0.0
[-] App
- build-type: bundle
- CSP: unset
- frontendDist: ../dist
- devUrl: http://localhost:8080/
- framework: Vue.js
- bundler: Vite
Stack trace
No response
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by running the MDN documentPictureInPicture example in a Tauri app on Windows with the reported WebView2 environment, then reduce it to the supplied @media (display-mode: picture-in-picture) case. Trace how the documentPictureInPicture window is created and how its display mode is exposed; done means the PiP window applies the CSS rules and the reproduction shows the red background or mute button.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, rust
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100