Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Newly rendered component's styles are added to <head> of original window, and not in PIP window's <head> #110

Open
im185087 opened this issue Jan 30, 2024 · 3 comments

Comments

@im185087
Copy link

im185087 commented Jan 30, 2024

Hi there,

My team and I are experiencing an issue where, when we have a PIP window open and a React component is rendered within the PIP window, the styles that are generated from its makeStyles (MUI v5) are not being added to the <head> element in the PIP's DOM but instead are being added to the <head> original window's DOM.

To provide some context:

we have a chat, and when you click on a button, you can open it in a PIP window. We're following the examples provided on the Google developer page to create the PIP window and copy the stylesheets over. We are also using createPortal from React, to render our chat inside the PIP window.

The chat renders with our styling as expected. But, if our chat moves to the PIP window with no message components rendered initially (basically no messages have been sent in the chat), and a message is then sent/received, the styling for them is not applied.

We did some investigation and noticed that when a message component is rendered in the PIP window, the styles (that are generated from MUI makeStyles) are applied in the <head> of the original DOM as opposed to the <head> of the PIP window DOM (where that message component lives).

Does anyone have any insight as to what may be happening here? Any help is appreciated.

@drmercer
Copy link

drmercer commented Feb 17, 2024

In my experience, lots of things break when running scripts in one window to control the DOM in another. (For example element instanceof HTMLElement breaks when element is from a different window.) I imagine a lot of frameworks aren't built or tested with that use case in mind...

This means the current design of Doc PIP is not my favorite, because the Doc PIP window doesn't load its own document like a normal window. In my use of Doc PIP, I worked around this by loading an <iframe> in the Doc PIP window, so that I can have a normal self-contained window that doesn't violate the assumptions of web frameworks. 😅 The downside is now I have to use postMessage to communicate between the windows, but I haven't needed to do that much in my case.

@beaufortfrancois
Copy link
Contributor

In my experience, lots of things break when running scripts in one window to control the DOM in another. (For example element instanceof HTMLElement breaks when element is from a different window.) I imagine a lot of frameworks aren't built or tested with that use case in mind...

In https://document-picture-in-picture-api.glitch.me/, when the PiP window is opened, the following code works as expected:

documentPictureInPicture.window.document.querySelector('video') instanceof HTMLElement

@drmercer Can you share reproducible steps?

@clumsyme
Copy link

clumsyme commented Nov 1, 2024

In my experience, lots of things break when running scripts in one window to control the DOM in another. (For example element instanceof HTMLElement breaks when element is from a different window.) I imagine a lot of frameworks aren't built or tested with that use case in mind...

In https://document-picture-in-picture-api.glitch.me/, when the PiP window is opened, the following code works as expected:

documentPictureInPicture.window.document.querySelector('video') instanceof HTMLElement

@drmercer Can you share reproducible steps?

I've encountered the same issue when i render a react portal in the pip window.

Chrome Version: 130.0.6723.70
OS: MacOS 14.3 (23D56)

the live demo: https://3rpw52.csb.app/

the code:

import { useState } from "react";
import { createPortal } from "react-dom";

export default function App() {
  const [pip, setPip] = useState<Window | null>(null);

  return pip ? (
    createPortal(
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <p>Start editing to see some magic happen!</p>
        <video />
      </div>,
      pip.document.body
    )
  ) : (
    <button
      onClick={async () => {
        const pipWindow = await documentPictureInPicture.requestWindow();
        setPip(pipWindow);
      }}
    >
      Open Pip
    </button>
  );
}

the result:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants