Repository navigation
[iOS 27 WebKit regression] MediaStream video created from Solid JSX does not paint #2969
Description
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
- On an iPhone running iOS 27 public beta, open the reproduction.
- Press Start camera and grant camera access.
- Compare the
document.createElement("video")control with the template-cloned video. - 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-js1.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.
Activity
mariokresic commentedon Aug 4, 2026
A framework-specific reproduction is now available:
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.