Bug 93358 - inline-block span positioned "relative" inside foreignObject are not scaled correctly
: inline-block span positioned "relative" inside foreignObject are not scaled c...
: WebKit
Layout and Rendering
: 528+ (Nightly build)
: All All
: P2 Normal
Assigned To:
: 84012 126516
  Show dependency treegraph
Reported: 2012-08-07 05:33 PST by
Modified: 2014-01-08 23:09 PST (History)

testcase (473 bytes, text/html)
2012-08-07 05:33 PST, Frédéric Wang
no flags Details
Another test case. (697 bytes, text/html)
2012-11-18 21:41 PST, Neil
no flags Details


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

Description From 2012-08-07 05:33:27 PST
Created an attachment (id=156918) [details]

A MathJax user reported that the HTML+CSS code generated by MathJax to display mathematical formulas is not rendered correctly in Webkit when scaled inside SVG:


The code generated by MathJax contains many <span>'s and it's hard to say what the problem is. However, I think I have isolated one issue with <span style="display: inline-block; position: relative;">, which are used everywhere in the generated code.

In the attached testcase, such a span is used to draw a 50x50 red rectangle. I use SVG to scale it by a factor of 2. In Firefox, it thus fits in the 100x100 black frame. However in Webkit this rectangle is still rendered with a size of 50x50. Note that if you use "position: static;", it is correctly scaled.
------- Comment #1 From 2012-08-07 05:37:46 PST -------
Of course, this affects both coordinates and size. You can try to use "left: 25px; top: 25px; width: 25px; height: 25px;" in the testcase.
------- Comment #2 From 2012-11-18 21:41:40 PST -------
Created an attachment (id=174887) [details]
Another test case.

This bug prevents the use of Closure UI widgets in SVG.  Attached is an independently created testcase.  Works fine in Gecko.
------- Comment #3 From 2012-11-18 22:01:47 PST -------
SVG trees don't have RenderLayers.  It's a loooong standing bug. :(