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 | ||
Jakub T. Jankiewicz
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Simon Fraser (smfr)
Almost certainly the same issue. There's work happening (LBSE) to address this.
*** This bug has been marked as a duplicate of bug 23113 ***
Jakub T. Jankiewicz
When It will be fixed I will revisit this one. Since there are two issues on top of each other.