This is similar to https://bugs.webkit.org/show_bug.cgi?id=23113
I have a demo application inside of SVG foreign object (the position of the terminal is wrong, but this is the linked issue).
The demo (with the latest fixes) doesn't render at all on CodePen
Even in Full Mode (works fine in Firefox and Chrome)
My other demo works fine in Full Mode:
This is Demo of my Web-Based Terminal: https://codepen.io/jcubic/full/BwBYOZ
When I tested it in BrowserStack Safari 15.3 CodePen Editor mode doesn't render at all.
It displays a white screen, with no error.
But the issue is about my app inside SVG foreign Object:
The code use some CSS variables but the output is all black. And in dev tools changing inline color
doesn't make any effect.
I think that there are multiple errors with HTML+CSS inside SVG foreign object. Right now it's not usable at all.
Almost certainly the same issue. There's work happening (LBSE) to address this.
*** This bug has been marked as a duplicate of bug 23113 ***
When It will be fixed I will revisit this one. Since there are two issues on top of each other.