Bug 149388 - SVG foreignObject with HTML containing SVG does not display correctly
Summary: SVG foreignObject with HTML containing SVG does not display correctly
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Major
Assignee: Nobody
URL: http://svgdesign.guru
Keywords: InRadar, SVGHitList
: 202659 (view as bug list)
Depends on:
Blocks:
 
Reported: 2015-09-20 10:58 PDT by James Deering
Modified: 2024-03-05 21:13 PST (History)
9 users (show)

See Also:

Attachments
Visual display (466.37 KB, image/png)
2015-09-28 16:31 PDT, James Deering 		no flags Details
Visual Display 2 (346.52 KB, image/png)
2015-09-28 16:36 PDT, James Deering 		no flags Details
reduction (452 bytes, text/html)
2015-10-14 11:33 PDT, Said Abou-Hallawa 		no flags Details
reduction (483 bytes, text/html)
2015-10-14 11:57 PDT, Said Abou-Hallawa 		no flags Details
4k 16:9 aspect ratio test case (483 bytes, text/html)
2015-10-14 12:48 PDT, James Deering 		no flags Details
Show Obsolete (1) View All Add an attachment (proposed patch, testcase, etc.)

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