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). https://terminal.jcubic.pl/laptop/ The demo (with the latest fixes) doesn't render at all on CodePen https://codepen.io/jcubic/pen/rNYybjr?editors=0011 Even in Full Mode (works fine in Firefox and Chrome) My other demo works fine in Full Mode: https://codepen.io/jcubic/full/BwBYOZ 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: https://codepen.io/jcubic/full/BwBYOZ 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.