Bug 186595 - SVG container has wrong aspect ratio when using vertical writing ("writing-mode: vertical-rl;")
Summary: SVG container has wrong aspect ratio when using vertical writing ("writing-mo...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebKit2 (show other bugs)
Version: Safari Technology Preview
Hardware: iPhone / iPad iOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-06-13 09:57 PDT by Gabe Giosia
Modified: 2022-07-19 04:58 PDT (History)
10 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Gabe Giosia 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>
Comment 1 Gabe Giosia 2018-06-13 09:59:03 PDT
Created attachment 342668 [details]
example HTML for the problem.
Comment 2 Gabe Giosia 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).
Comment 3 Radar WebKit Bug Importer 2018-06-14 08:53:53 PDT
<rdar://problem/41126338>
Comment 4 Ahmad Saleem 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!