tauri-apps / tauri

Build smaller, faster, and more secure desktop and mobile applications with a web frontend.
https://tauri.app
Apache License 2.0
85.39k stars 2.58k forks source link

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

Open bra1n opened 2 weeks ago

bra1n commented 2 weeks ago

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