Raphael.js function getBBox give back NAN/NAN/NAN in IE8

Question

using Raphaël 2.1.4 - JavaScript Vector Library do something like that:

var textDummy = paper.text(50,500, 'hello world').attr({fill: 'transparent', 'font-size': 14});
var textBox = textDummy.getBBox();

with chrome and firefox everything is fine, but in IE8 it give back NaN/NaN/NaN, par exemple textBox.height is NaN.

how i can fix this?

Dizzy

Answer 1

I had the same problem in Rapahel 2.2.0 and 2.2.1, and using ._getBBox() didn't fix it for me.

What did fix it for me is falling back to .auxGetBBox() if it's defined and regular .getBBox() doesn't work, like this:

var bbox = path.getBBox( );

// Workaround for apparent bug in Raphael's VML module's getBBox() override
if( isNaN( bbox.x ) && path.auxGetBBox ){
  bbox = path.auxGetBBox();
}

---

I don't have a fix for the underlying bug, but I have found the source of it.

In VML mode, Raphael takes the initial getBBox() function, saves it as auxGetBBox() on the element prototype, then replaces it with a function that appears to be broken.

It has calculations based on a variable defined as var z = 1/this.paper._viewBoxShift.scale;, which clearly expects _viewBoxShift.scale to be some factor of the scale of the current viewbox compared to the initial viewbox , but actually _viewBoxShift.scale is an object like this which appears to come from paperproto.getSize():

{ height: someNumber, width: someNumber }

This is where all the NaNs are coming from. Cannae divide by an object.

So this workaround works fine if no zoom is applied using a viewbox, but may give incorrect results if a zoom has been applied (something I can't get to work at all in recent versions of raphael in VML mode, but that's a seperate question). Fixing that will involve digging deep into Raphael's VML module to pipe a proper zoom factor into this z variable.

Locomobile

Answer 2

i found a workaround solution from this answer to the question "Raphael JS and Text positioning"

If i use _getBBox() instead of getBBox() everything is working in ie 8 also.

_getBBox() is undocumented but used internally by Raphael itself, and it works!

Dizzy

This doesn't work for me in Raphael 2.2.0 - path.getBBox() in IE8 for me returns { height: NaN, width: NaN, x: NaN, x2: NaN, y: NaN, y2: NaN } while path._getBBox() returns {height: undefined, width: undefined, x: NaN, y: NaN} – Locomobile