getBBox throws blocking error in Firefox

[janoserdelyi]

Firefox 3.0.11
i am loading both prototype and jquery libraries prior to loading raphael 0.8. jquery is in noconflict mode. i don't know if any of that matters, but providing it just in case.

i'm using the uncompressed raw file for ease of hunting down issues.

when i load up 0.8 in FF i get this error:

Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://local.www.sqibl.com/js/raphael.0.8.js :: anonymous :: line 1135" data: no]
Source File: http://local.www.sqibl.com/js/raphael.0.8.js
Line: 1135

when i click through, the offending line it takes me to is actually line 1136 which is:
var bbox = this.node.getBBox();

[pieleric]

I'm facing the same problem, it prevents some "text" elements to be displayed. For example, the texts in the popup of the demo "http://raphaeljs.com/analytics.html" are not displayed: the popup is empty.

More info:
It used to work fine with 0.7.4 . b3e699a is good, and next one, a42f6a6 is bad.

[pieleric]

Forgot to mention that this happens also in IE8.

[sbj42]

My guess is that this is happening because you haven't added the node to the DOM tree yet. Make sure that the element you have put Raphael in is attached to the document before you call getBBox.

[pieleric]

Could you show how to fix this in http://raphaeljs.com/analytics.html ?

[sbj42]

Unfortunately, no. I ran it and saw the error, but I can't get a stack trace to see who is calling getBBox. I think it's in the jquery code which is obfuscated. Basically I would suggest coming up with a simpler test case.

[pieleric]

After reducing the code to something simpler, it appears that the error happens when changing the attr of a text which is hidden. After retrying is different browsers, the error seems to happen both on Firefox, and webkit (epiphany), but not on IE (so discard my previous comment about IE).

Here is a simple snippet for http://raphaeljs.com/playground.html :
var txt = {"font": '12px "Arial"', stroke: "none", fill: "#000"};

var label = [];

label[0] = paper.text(60, 10, "text 0").attr(txt).hide();

label[1] = paper.text(60, 30, "text 1").attr(txt).hide();

label[2] = paper.text(60, 50, "A pity").attr(txt);

label[0].show().attr({text: "text 0 works" });

label[1].attr({text: "text 1 does not work" }).show();

label[2] = paper.text(60, 70, "really a pity").attr(txt);

[sbj42]

This may or may not be a bug in Firefox, but I believe the following change works around this issue:

In Raphael 0.8.2, replace lines 1085 and 1086 with these lines:

// In Firefox, getBBox fails if the node is hidden
var oldDisplay = node.style.display;
node.style.display = "block";
var bb = el.getBBox(),
    dif = a.y - (bb.y + bb.height / 2);
node.style.display = oldDisplay;

[sbj42]

Another possibility might be to convert the show()/hide() functions so that they use node.style.visibility ("hidden" / "visible") instead of node.style.display ("block" / "none"). I haven't tested that, but it might work.

[DmitryBaranovskiy]

I applied the fix, but it still cause an error if the whole canvas is display:none. Not sure how can I workaround this.

[ghost]

Issue is calling getBBox even when we are using a text element, you'll notice my fix...which does work, tested in IE/FireFox/Opera

    Element.prototype.hide = function () {
        this.node.style.display = "none";
        //this.node.style.visibility = "hidden";
        return this;
    };
    Element.prototype.show = function () {
        this.node.style.display = "block";
        //this.node.style.visibility = "visible";
        return this;
    };
    Element.prototype.IsVisible = function () {
        return this.node.style.display == "block";
    }
    Element.prototype.remove = function () {
        this.node.parentNode.removeChild(this.node);
    };
    Element.prototype.getBBox = function () {
        var hide = false;
        if (!this.IsVisible()) {
            this.show();
            this.node.style.display = "block";
            hide = true;
        }
        var bbox = {};
        if (this.type == "text") {
            bbox = {x: bbox.x, y: Infinity, width: bbox.width, height: 0};
            for (var i = 0, ii = this.node.getNumberOfChars(); i < ii; i++) {
                var bb = this.node.getExtentOfChar(i);
                (bb.y < bbox.y) && (bbox.y = bb.y);
                (bb.y + bb.height - bbox.y > bbox.height) && (bbox.height = bb.y + bb.height - bbox.y);
            }
        } else {
            bbox = this.node.getBBox()
        }
        if (hide) {this.hide(); this.node.style.display = "none"}
        return bbox;
    };

[totszwai]

What ever happened to this fix? How come is not committed? This fix works.

[tomasAlabes]

Does this happen on the latest version of Raphael? Browser's version?

[totszwai]

UPDATED:

After digging it further, this happens in Chrome (I am using Version 27.0.1453.94m) because getBBox seems to be broken in all browser??

Edit: I tried both the 2.1.0 as well as the latest version from github, is happening in both.

elproto._getBBox = function () {
    if (this.node.style.display == "none") {
        this.show();
        var hide = true;
    }
    var bbox = {};
    try {
        bbox = this.node.getBBox();
    } catch(e) {
        // Firefox 3.0.x plays badly here
    } finally {
        bbox = bbox || {};
    }
    hide && this.hide();
    return bbox;
};

On line 6573: bbox = this.node.getBBox();

Chrome returns: { height: 0, width: 0, x: 0, y: 0 }

Edit: I tried @ghost 's solution, and actually this.node.getNumberOfChars() is broken as well... but because is broken, it causes Chrome to get undefined as well...

This is what it looks like in Chrome, as you can see, the text that I created all have the wrong y position.
The custom text that I tried to put under each bar actually got pushed all the way down, because of the incorrect y position.

Edit: In firefox and IE, both looks fine

So after 4 years, lol, the problem still come down to this:
[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: :: elproto._getBBox :: line 1" data: no]

PS: I am not using the exiting legend function, because it is broken as well (same issue with getBBox), i have to render it using my own js function.

[tomasAlabes]

Any piece of code to reproduce the bug?

[totszwai]

I had a couple of Raphael jsFiddle working last week, this week I don't know what happened to jsFiddle, it kept complaining Raphael not found... I had Extensions set to jQuery and then have External Resources points to Raphael github.

The screenshots I posted are work related lol, so can't post internal links for those. I will need to get the jsFiddle up and running again. Will get back to ya tomorrow.

I wonder if this has anything to do with using the text in conjunction with the chart. Because I just did a quick jsFiddle, had a loop generating 4 texts and the spacing seems fine. But one thing for sure is that getBBox isn't working properly. (is this a common/known issue?)

[totszwai]

Gawd, can't reproduce it on jsFiddle either... and those are the EXACT same Javascript function that I used: http://jsfiddle.net/totszwai/pDm4y/8/

With the exception that I had to perform the js call immediately after the div. jsFiddle won't let me put js calls inside HTML.

  <div id="sample" style="height: 200px;" />
  <script>
      var props = {
              id: 'sample',
              width: 400,
              height: 200,
              value: [[4,2,0,9],[2,12,1,2],[5,2,0,5]],
              stacked: true,
              label: ["sample 1","sample 2","sample 3","sample 4","sample 5"]
          }; 
      renderBarChart(props);
  </script>

Update:
Any clue on why Chrome getBBox not returning the same value as FF?

Update: Could this be a Chrome/webkit related bug? https://bugs.webkit.org/show_bug.cgi?id=93290 (looks like they still haven't resolve it) But this still doesn't explain why it works in my jsFiddle and not in my case...

Update:
Fixed the weird, Chrome only, very specific scenario case with the following:

  var bbox = {};
  try {
     bbox = this.node.getBBox();
     // For Chrome
     if (!ie && !bbox.x && !bbox.y && !bbox.height && !bbox.width) {
         bbox.x = this.attr('x');
         bbox.y = this.attr('y');
     }
  } catch(e) {
     // Firefox 3.0.x plays badly here
  } finally {
     bbox = bbox || {};

  }

[1Cr18Ni9]

If you want getBBox to be functional the svg element should be visiable.
Try This: JSFiddle.

[rasalshri]

If you are using html template and css, javascript then ,
remove class with property display:none above the map class and add some new class
after loading or executing getbox function attach that removed class(having property display: none) through javascript.
it works for me , and simple and easy thanks.
it is simple and quick solution

[nikober]

If you want getBBox to be functional the svg element should be visiable.
Try This: JSFiddle.

Still error
[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: https://fiddle.jshell.net/Cheery/9qvkxp8v/show/ :: window.onload :: line 48" data: no]