tauri-apps / tauri-apps/tauri

[bug] documentPictureInPicture window does not apply appropriate display-mode: picture-in-picture CSS media tag

Open
#11,613 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

status: needs triage type: bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.