document-picture-in-picture
document-picture-in-picture copied to clipboard
WICG
Newly rendered component's styles are added to <head> of original window, and not in PIP window's <head>
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.
