Label artifacts on long pages

[benrifkah]

Some graphs with labels leave text artifacts when used on long pages over 10000px in height.

Steps to reproduce:

1. Visit the flotr2 examples page here: http://www.humblesoftware.com/flotr2/#!basic-axis
2. Inspect the #header div with your favorite developer tools.
3. Add the following style to the #header div "height: 10000px" to make the page very long and push the example graph far down the page

Results: in the area where the graph example is displayed note the floating "This is a subtitle" text artifact which occludes the "Basic Axis example" heading.

Expected Results: no text artifact.

This example is admittedly contrived. However, I have some long report pages where this is an issue.

[benrifkah]

I traced this to the following code in the flotr2.js file:

2277   html : function (text, element, style, className) {
2278
2279     var div = D.create('div');
2280
2281     D.setStyles(div, { 'position' : 'absolute', 'top' : '-10000px' });
2282     D.insert(div, '<div style="'+style+'" class="'+className+' flotr-dummy-div">' + text + '</div>');
2283     D.insert(this.o.element, div);
2284
2285     return D.size(div);
2286   },

This inserts a div that is meant to be invisible so that the dimensions of text can be determined if it is rendered as html. The div is made invisible by placing it 10000px above the position of the graph. The div is then returned and the height and width are taken from its attributes by the Text.html() caller.

I believe this can be fixed by storing the results of D.size(div) and then removing the dummy div before returning the results. I'll submit a pull request later today.

[benrifkah]

Here is a jsfiddle that demonstrates the problem.

[Pyrolistical]

Ran into this today. If you just need it for the dim, why not delete it afterwards?