Bug 218847

Summary:

SVG symbol in Safari Shifted while in Chrome and Firefox is looking Great

Product:

WebKit

Reporter:

Myogeo <mohameds.geologist>

Component:

SVG

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Critical

CC:

sabouhallawa, simon.fraser, webkit-bug-importer, zalan, zimmermann

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari Technology Preview

Hardware:

All

OS:

Unspecified

Attachments:

Description	Flags
Safari browser	none
test case	none

Description Myogeo 2020-11-12 05:31:20 PST

Created attachment 413927 [details]
Safari browser

I have a weird behavior in Safari browser, I have some Inline SVGs and the arrow symbol above a character is shifted to the right only in Safari as you can see in the attached image

My SVG sample is like

<svg style="vertical-align:-6.22765642025996pt" width="128pt" height="21pt" viewBox="-1 -1 128 21">
<g font-family="MathFont" font-size="13.5">
    <text y="11.338" x="10.06">⃑</text>
    <text y="13.773">𝐴</text>
    <text y="13.773" x="13.611">=</text>
    <text y="13.968" x="27.04"></text>
    <text y="13.773" x="32.702">𝑘</text>
    <text y="13.773" x="43.26">−</text>
    <text y="13.773" x="55.929">2</text>
    <text y="13.773" x="62.587">,</text>
    <text y="13.773" x="68.209">𝑚</text>
    <text y="13.773" x="88.102">−</text>
    <text y="13.773" x="100.771">2</text>
    <text y="13.773" x="107.429">,</text>
    <text y="13.773" x="113.037">4</text>
    <text y="13.968" x="119.706"></text>
</g>
<g font-family="MathFont" font-size="9.45">
    <text y="8.931" x="79.642"></text>
</g>
</svg>


So, am I miss something?

Comment 1 Radar WebKit Bug Importer 2020-11-14 11:56:42 PST

<rdar://problem/71403792>

Comment 2 Said Abou-Hallawa 2020-11-17 11:36:33 PST

Created attachment 414358 [details]
test case

I am attaching a test case in which the "COMBINING RIGHT HARPOON ABOVE (U+20D1)" is used inside HTML and SVG tags. WebKit seems to treat this character as a normal character. Other browsers seem to treat it as a right-aligned diacritic character so they do not respect the "text-anchor" attribute when it is applied on the <text> tag.

Comment 3 Myogeo 2020-12-13 01:07:19 PST

Thank you for your comment, I solved the issue with your advice but I am wondering if any other characters seems to be like this harpoon or just this kind of harpoon will cause such issue.