[iOS 27 WebKit regression] MediaStream video created from Solid JSX does not paint

[mariokresic]

Describe the bug

On iOS 27 public beta, a camera MediaStream attached to a <video> created from Solid JSX can play and decode frames but does not paint on screen. The element reports progressing playback, valid video dimensions, and a live track; copying the same element to canvas produces a visible, updating image.

We isolated this to a Safari/WebKit 27 regression affecting video elements created through template cloning (HTMLTemplateElement.content.cloneNode(true)). A control created with document.createElement("video") paints correctly. The same reproduction works on iOS 26.

Solid's template-cloning behavior is standards-compliant, so this is primarily an upstream WebKit issue. This report is to make the Solid team aware of the compatibility regression and the available workaround.

WebKit report: https://bugs.webkit.org/show_bug.cgi?id=320979

Your Example Website or App

https://mariokresic.github.io/safari-27-template-cloned-mediastream-repro/

Source: https://github.com/mariokresic/safari-27-template-cloned-mediastream-repro

Steps to Reproduce the Bug or Issue

1. On an iPhone running iOS 27 public beta, open the reproduction.
2. Press Start camera and grant camera access.
3. Compare the document.createElement("video") control with the template-cloned video.
4. Observe that the template-cloned video is black/empty while its canvas copy remains visible and live.

In a Solid application, a static JSX <video> follows the template-cloning path and shows the same behavior.

Expected behavior

The MediaStream video should paint the live camera preview, as it does on iOS 26 and when the video is created imperatively.

Screenshots or Videos

The live reproduction shows the working control, failing video, canvas copy, and playback diagnostics side by side.

Platform

• OS: iOS 27 public beta; control test on iOS 26
• Browser: Safari
• Solid: solid-js 1.9.11
• Hardware: iPhone

Additional context

Workaround: create the preview element with document.createElement("video") and mount it into the Solid UI. This was verified on the affected device.

This appears to be a new occurrence of the browser behavior discussed in #1408, which was closed as stale after later iOS versions worked.

[mariokresic]

A framework-specific reproduction is now available:

• Live Solid app: https://mariokresic.github.io/safari-27-template-cloned-mediastream-repro/solid/
• Solid JSX source: https://github.com/mariokresic/safari-27-template-cloned-mediastream-repro/blob/main/solid-source/src/main.jsx

It is built with Solid 1.9.11 and Vite. Both videos receive the same MediaStream: the imperative control uses document.createElement(), while the failing video is a static Solid JSX element. The production bundle confirms that the JSX video is instantiated through Solid's template cloneNode(true) path. The canvas is drawn from that same JSX video to show that frames remain available even when the video does not paint.