Bug 149388

Summary: SVG foreignObject with HTML containing SVG does not display correctly
Product: WebKit Reporter: James Deering <jcdsvg>
Component: SVGAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Major CC: bfulgham, ddkilzer, eoconnor, jonlee, karlcow, sabouhallawa, simon.fraser, webkit-bug-importer, zimmermann
Priority: P2 Keywords: InRadar, SVGHitList
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
URL: http://svgdesign.guru
See Also: https://bugs.webkit.org/show_bug.cgi?id=165516
https://bugs.webkit.org/show_bug.cgi?id=23113
Attachments:
Description Flags
Visual display
none
Visual Display 2
none
reduction
none
reduction
none
4k 16:9 aspect ratio test case none

Description James Deering 2015-09-20 10:58:31 PDT
SVG files inline in HTML, when shown through the SVG foreignObject tag fail to size properly.

Firefox and Edge browsers display perfectly, WebKit does not.

This can be confirmed by visiting my web site:

http://svgdesign.guru

Sincerely;

James Deering
Comment 1 James Deering 2015-09-28 16:31:04 PDT
Created attachment 262027 [details]
Visual display

This is what the display looks like with this bug. Not good.
Comment 2 James Deering 2015-09-28 16:36:27 PDT
Created attachment 262028 [details]
Visual Display 2

As can be seen WebKit is way out of whack when dealing with SVG in HTML and SVG foreignObject.
Comment 3 Radar WebKit Bug Importer 2015-10-09 19:48:16 PDT
<rdar://problem/23058999>
Comment 4 Said Abou-Hallawa 2015-10-14 11:33:31 PDT
Created attachment 263090 [details]
reduction

I am attaching a reduced test case. It has an svg with viewBox="0, 0, 2000, 1000". In WebKit, the svg does not resize with the window resize. In FireFox, the svg is resized with the window resizing till it exceeds 2000x1000 then it does not scale.
Comment 5 Said Abou-Hallawa 2015-10-14 11:57:54 PDT
Created attachment 263094 [details]
reduction
Comment 6 James Deering 2015-10-14 12:48:31 PDT
Created attachment 263099 [details]
4k 16:9 aspect ratio test case
Comment 7 James Deering 2015-10-14 12:52:05 PDT
Comment on attachment 263099 [details]
4k 16:9 aspect ratio test case

Keep in mind that the foreignObject is designed to display the ATSC HD standard 16:9 aspect ratio. Don't know if it is important to the solution, but to be safe I changed your test case to reflect a 4k 16:9 aspect ratio.
Comment 8 Simon Fraser (smfr) 2019-12-16 21:03:54 PST
*** Bug 202659 has been marked as a duplicate of this bug. ***
Comment 9 James Deering 2019-12-21 17:49:15 PST
Web site has changed. To view the problem use https://www.svg.guru for a test case. Chromium based browsers or FireFox render perfectly. WebKit browsers do not.