Bug 238461

Summary:	HTML+CSS inside SVG foreignObject doesn't render
Product:	WebKit	Reporter:	Jakub T. Jankiewicz <jcubic>
Component:	Layout and Rendering	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED DUPLICATE
Severity:	Normal	CC:	bfulgham, simon.fraser, zalan
Priority:	P2
Version:	Safari 15
Hardware:	Unspecified
OS:	Unspecified

Description Jakub T. Jankiewicz 2022-03-28 10:56:23 PDT

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.

Comment 1 Simon Fraser (smfr) 2022-03-28 11:00:16 PDT

Almost certainly the same issue. There's work happening (LBSE) to address this.

*** This bug has been marked as a duplicate of bug 23113 ***

Comment 2 Jakub T. Jankiewicz 2022-03-28 11:33:54 PDT

When It will be fixed I will revisit this one. Since there are two issues on top of each other.