-
Notifications
You must be signed in to change notification settings - Fork 10
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
Comments
In my experience, lots of things break when running scripts in one window to control the DOM in another. (For example 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 |
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 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: |
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.
The text was updated successfully, but these errors were encountered: