raphael
raphael copied to clipboard
DmitryBaranovskiy
getBBox() fails for text elements when paper not visible
If you call getBBox() to get the bounding box of a text element when the whole Raphael element is hidden (e.g. if it is inside a <div> with display: none) then the properties of the returned object are all set to NaN rather than the actual bounding box values of the element.
This means that it is impossible to perform proper layout whilst the element is hidden.
As JS doesn't provide a way of detecting when a hidden element becomes visible there is also no way to resolve this by redrawing the element automatically when the item becomes visible.
This is a serious issue for me, as I am creating an interactive widget that people can place on their page, and in situations where this is initially invisible the widget ends up being layed-out incorrectly and there is no way to fix this. The best I have managed is by having a timeout() set which tries to redraw the widget every 100 ms, which is horribly inefficient!
getBBox() should be fixed so it works regardless of whether the element is visible or not.
Note that I have tested this for circle elements, and it seems to work fine. Presumably other basic shapes are also fine - I have not tested them.
I've put together a fiddle showing the problem. Enable your JS console to see the output: http://jsfiddle.net/Ca2yk/
y.getBBox() has all values set to NaN. Removing display: none from the surrounding <div> gives the expected values, as shown here http://jsfiddle.net/Ca2yk/1/
Tested in Firefox 22.0
Further update - have tested in Chrome and get the same problem, except in this case the values are all set to 0 rather than NaN.
dear
I have the same problem because I want migrate a raphael app to polymerJS and polymer hiddes the elements initial. Did you find a solution for the BBox problem?
Greetings
