Skip to content

Support custom Document implementation for Picture-in-Picture (or other isolated documents) #255

@nmsn

Description

@nmsn

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

  1. Open a Picture-in-Picture window (window.document differs from the host page)
  2. Render <MeshGradient /> (or use vanilla ShaderMount) inside the pip document
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions