Browse Tag

raphael.js

Raphael.js IE7 issue with innerHTML on elements other than div

I kept having this unknown error on IE7 (IE9 compatibility mode) when I use Raphaël JavaScript Library. On deeper research, this error points me to line 5178’s “span.innerHTML”.

I found this very interesting article http://domscripting.com/blog/display/99 about usage of .innerHTML in IE7:

…innerHTML can cause some problems, particularly in Internet Explorer. If you use innerHTML to add or update form elements, all sorts of screwiness can occur. Sometimes the data from the newly added elements won’t be included when the form is submitted to the server.

and it provided a useful fix:

First of all, use the DOM to create a block level element—such as a div—using createElement. Then update the innerHTML property of this newly-created element. Finally, insert the updated element into the document using a DOM method like appendChild or insertBefore…

I thought it was a perfect fix, so I searched for the .innerHTML implementation in raphael.js (line 5178):

res.textpath.string && (span.innerHTML = Str(res.textpath.string).replace(/"));

and changed it to:

/*Resolve IE7 issue with innerHTML*/	
var newdiv = document.createElement("div");
res.textpath.string && (newdiv.innerHTML = Str(res.textpath.string).replace(/"));
span.appendChild(newdiv);
/*end of resolution*/

Somehow it worked very well. I had forked and submitted a fix but still waiting for the main master to commit this change. You can find the fix at my fork:
https://github.com/kongnir/raphael/compare/master…patch-1