Bug 186595

Summary:

SVG container has wrong aspect ratio when using vertical writing ("writing-mode: vertical-rl;")

Product:

WebKit

Reporter:

Gabe Giosia <giosia>

Component:

WebKit2

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

ahmad.saleem792, ap, bfulgham, giosia, mmaxfield, rniwa, sabouhallawa, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

BrowserCompat, InRadar, LayerBasedSVGEngine

Version:

Safari Technology Preview

Hardware:

iPhone / iPad

OS:

iOS 11

Attachments:

Description	Flags
Demonstration of inlining an SVG with vertical language and horizontal language.	none
example HTML for the problem.	none

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!

Ahmad Saleem

Comment 5 2025-11-26 13:47:10 PST

It is fixed with 303578@main. *** This bug has been marked as a duplicate of bug 248769 ***

Note You need to log in before you can comment on or make changes to this bug.