paper.text(x,y,text) creates <tspan> element with "doubled" dy value.

[Siyfion]

In raphael.js on lines 6352 - 6354:

var bb = el._getBBox(),
  dif = a.y - (bb.y + bb.height / 2);
dif && R.is(dif, "finite") && $(tspans[0], {dy: dif});

I can reproduce the issue whereby the value of bb is calculated as:

height: 0
width: 0
x: 0
y: 0

a.x = 65 and a.y = 65, resulting in a caluculated dy value of 65, which essentially doubles the y offset for the given <tspan>.

In _getBBox() the value of this.node.style.display is "" and this.node.getBBox() returns the object seen above.

[Siyfion]

I have narrowed down the problem to only occurring if the SVG canvas is currently not visible and have managed to create a jsFiddle that highlights the issue. http://jsfiddle.net/jG3tj/3/

Is there something that I can do to help with this @DmitryBaranovskiy ?

[TravisTheTechie]

This was a bug that caused me to stop using Raphael, oh two years ago. A fix would be awesome.

[Siyfion]

Yeah, I think there's a few people in a similar situation @TravisTheTechie, it may be that there isn't a "fix" for the getBBox() returning an object with all zero values, but it'd be nice to at least put a trap in for this, so that it doesn't go mental and double the Y offset!

Just realised that @tomasAlabes might be the better person to ask about this as he seems to have been the more active maintainer of this project.

[tomasAlabes]

Hi guys, I'll try to take a look at this. Meanwhile any more info about it will help. Anyway I don't know if it is a bug, I've seen more than 1 issue with hidden canvas and the stuff done is simple. Perhaps is the browser+svg.

[Siyfion]

@tomasAlabes not sure how much more info I can provide other than saying that I'm using the latest Chrome release for Windows along with the jsFiddle and the issue occurs every time? If there's anything specific you'd like to know, just ask! 😄

[Siyfion]

@tomasAlabes Just wondering if you've had a chance to look into this?

It's not 100% critical, but we're currently weighing up our options and looking into HTML5 canvas libraries as well (all our data will be programmatically generated anyway), it'd be nice to know whether this is an issue we'll have to deal with long-term with Raphael / SVG libraries, or if it's something we can assume will get fixed?

[dwg]

+1. Having same issue when rendering in initially hidden tabs.

My current workaround is the following css rule:

.contains-graphs {
  display: block !important;
  position: absolute;
  left: -9999px;
  top: 0;
}

I add that class to the hidden container and remove it when I'm done rendering. This is hackish at best and would much prefer a library solution.

[tomasAlabes]

Guys, I saw this issue a little bit and here is a possible fix, is hacky but meanwhile it can work:

In raphael.js:6683

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

Tomas

[jeffhoye]

Here's a work around for anyone waiting for the fix, just do this whenever you call paper.text(...)

var chromeBug = paper.text(...);
try {
  if (chromeBug.node.childNodes[0].attributes[0].name == "dy") {
    chromeBug.node.childNodes[0].attributes[0].value = 0;        
  }
} catch (err) {}

The code grabs the first childNode (assumes a tspan), then for a bit of safety, makes sure the first attribute is "dy" and sets it to "0"

I'm sure there this hack can be made better, but I just need it until they fix the bug in raphael. I haven't tested this on "every" browser, but it makes firefox/chrome work the same. The try/catch may be overkill.

[lancedikson]

I've seen this bag in Opera 17 only when URL has hash. I made map on Raphael.js and it works well but when I add hash for URL text labels of map was replaced to doubled value of y. @tomasAlabes thanks for hacky.

[accessdev]

thanks @jeffhoye this hack helps me a lot for a problem I encountered on my project with freetransform/raphael export

[dwg]

This issue is a duplicate of #491

[lancedikson]

@tomasAlabes, this fix doesn't work for IE11. Iit throws an error: the this.paper.canvas.parentElement.style value is undefined or NULL.

[tomasAlabes]

Let's move the discussion to 491. They have a couple of workarounds working.