Summary
MeshGradient (and other shaders) cannot render inside a Picture-in-Picture document because ShaderMount hard-codes document.createElement('canvas'), which creates the canvas in the host page's document rather than the pip document, causing rendering to fail.
Steps to Reproduce
- Open a Picture-in-Picture window (
window.document differs from the host page)
- Render
<MeshGradient /> (or use vanilla ShaderMount) inside the pip document
- Observe that the canvas is created in the host page's DOM, not the pip document, and nothing renders in the pip window
Root Cause
ShaderMount's constructor calls document.createElement('canvas') and prepends to the provided parentElement. This uses the global document, which belongs to the host page in pip contexts.
The React ShaderMount component directly instantiates this vanilla class, so the issue affects both React and vanilla usage.