NEW 186595
SVG container has wrong aspect ratio when using vertical writing ("writing-mode: vertical-rl;") 
https://bugs.webkit.org/show_bug.cgi?id=186595
Summary SVG container has wrong aspect ratio when using vertical writing ("writing-mo...
Gabe Giosia
Reported 2018-06-13 09:57:00 PDT
Created attachment 342667 [details] Demonstration of inlining an SVG with vertical language and horizontal language. When inlining an SVG that has "writing-mode: vertical-rl;" the aspect ratio of the container is inverse of what it should be. The SVGs in the following code are identical and display identically in FireFox and Chrome. WebKit/Safari display the first SVG with an inverted outer container which makes it look like it has padding. <!DOCTYPE html> <html> <head> <style id="prefs_css"> svg { width:200px; background-color:red; } </style> </head> <body> <div style="writing-mode: vertical-rl" xml:lang="ja" lang="ja"> vertical <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="0 0 1000 1500"> <ellipse cx="500" cy="750" rx="450" ry="700" style="fill:yellow; stroke:purple; stroke-width:50" /> </svg> vertical </div> <div style="writing-mode: horizontal-tb" xml:lang="en" lang="en"> horizontal <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" viewBox="0 0 1000 1500"> <ellipse cx="500" cy="750" rx="450" ry="700" style="fill:yellow; stroke:purple; stroke-width:50" /> </svg> horizontal </div> </body> </html>
Attachments
Demonstration of inlining an SVG with vertical language and horizontal language. (95.04 KB, image/jpeg)
2018-06-13 09:57 PDT, Gabe Giosia 		no flags
Details
example HTML for the problem. (811 bytes, text/html)
2018-06-13 09:59 PDT, Gabe Giosia 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Gabe Giosia
Comment 1 2018-06-13 09:59:03 PDT
Created attachment 342668 [details] example HTML for the problem.
Gabe Giosia
Comment 2 2018-06-14 07:10:19 PDT
For severity considerations: This is severely impacting Japanese content that uses SVGs. e.g. SVGs within ePubs that are displayed using WebKit are sometimes being cropped(SVGs are not fitting within their expected containers because of this bug).
Radar WebKit Bug Importer
Comment 3 2018-06-14 08:53:53 PDT
<rdar://problem/41126338>
Ahmad Saleem
Comment 4 2022-07-19 04:58:33 PDT
I am able to reproduce this bug in Safari 15.5 / Safari Technical Preview 149 on macOS 12.4 and it is showing same issue a shown in the attached screenshot (of demonstration). All other browsers (Chrome Canary 105 and Firefox Nightly 104) match each other. Thanks!
Note You need to log in before you can comment on or make changes to this bug.