Skip to content

Output in scaled foreignObject inside SVG in WebKit doesn't display #279

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
dpvc opened this issue Aug 6, 2012 · 8 comments
Open

Output in scaled foreignObject inside SVG in WebKit doesn't display #279

dpvc opened this issue Aug 6, 2012 · 8 comments
Labels
Accepted Issue has been reproduced by MathJax team Browser Bug Upstream

Comments

@dpvc
Copy link
Member

dpvc commented Aug 6, 2012

If MathJax is rendered inside a <foreignObject> tag inside a <g> with a scaling transformation in an SVG image, then WebKit will not show the math properly (it will not be scaled and is positioned incorrectly, often falling outside the clipping rectangle for the math, so it disappears.

See the discussion forum for details.

Example:

<html>
<head title="Example 1">
  <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
  <svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g transform="scale(2)">
      <foreignObject width="300" height="300">
        <div>\(G^2\)</div>
      </foreignObject>
    </g>
  </svg>
</body>
</html>
@fred-wang
Copy link
Contributor

After more investigation, it seems that spans with "display: inline-block; position: relative;" are not scaled correctly. I reported this bug upstream, with a reduced testcase:

https://bugs.webkit.org/show_bug.cgi?id=93358

I guess this is the reason why they don't fit inside the rectangles defined by the "clip" properties.

@dpvc
Copy link
Member Author

dpvc commented Aug 7, 2012

Excellent work! Thanks for determining this set of conditions that trigger the problem. I suspect we won't be able to work around that, as both properties are needed.

@fred-wang
Copy link
Contributor

=> Removing "Investigate" and setting "Address Later". That seems a Webkit bug that can be hardly avoided.

@kellertuer
Copy link

The same (even if not really rescaled) happens if one specifies viewBox, width, and height of the outer <SVG>

An Example

<html>
    <head>
        <title>SVG & foreignObjects (MathJax)</title>
        <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

    </head>
<body>
    <p>Works<br>
    <svg width="500" height="200">
        <foreignObject x="30" y="30" width="3em" height="12ex">
            <body xmlns="http://www.w3.org/1999/xhtml">ABC\(\frac{1}{2}\)</body>
        </foreignObject>
    </svg></p>
    <p>does not work<br>
    <svg viewBox="-250 -100 500 200" width="500" height="200">
        <foreignObject x="30" y="30" width="3em" height="12ex">
            <body xmlns="http://www.w3.org/1999/xhtml">ABC\(\frac{1}{2}\)</body>
        </foreignObject>
    </svg>
    </p>
</body>
</html>

@dpvc dpvc mentioned this issue Jan 28, 2014
Closed
@pkra pkra removed the Investigate label Apr 15, 2015
@pkra pkra added the Upstream label Jul 13, 2016
@matthieu-vergne
Copy link

Hi, did this issue evolved since? I am using exactly that kind of code on my blog, and although it renders well on Firefox it does not even appear on Chrome (maybe it is simply out of the visible rectangle).

@pkra
Copy link
Contributor

pkra commented Apr 13, 2017

This is due to a browser bug, https://bugs.webkit.org/show_bug.cgi?id=93358 which has not been resolved. Filling a separate bug in Blink might be necessary to get a fix into Chrome.

@matthieu-vergne
Copy link

OK, thanks.

@quantuminformation
Copy link

Causes me a lot of pain too

https://stackoverflow.com/questions/63690664/safari-macos-foreign-object-not-positioned-properly-inside-svg

what a crap browser

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Accepted Issue has been reproduced by MathJax team Browser Bug Upstream
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@kellertuer @quantuminformation @pkra @dpvc @fred-wang @matthieu-vergne