Bug 238461 - HTML+CSS inside SVG foreignObject doesn't render
Summary: HTML+CSS inside SVG foreignObject doesn't render
Status: RESOLVED DUPLICATE of bug 23113
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 15
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Depends on:
Reported: 2022-03-28 10:56 PDT by Jakub T. Jankiewicz
Modified: 2022-03-28 11:33 PDT (History)
3 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
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).

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.
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.