One of the ‘issues’ with writing HTML5 is using commands which work across all browsers. I came across a good example of this while debugging an issue this morning…
In a previous release I added this code snippet
if(actualWidth>20 && actualWidth>rawWidth && rawWidth!=actualWidth & el.innerText.search(' ') > -1){
It actually turns out that this causes issues in Firefox because Firefox does not support innerText and fails – anything in the Javascript after it meets this (which in this case was all the canvas drawing code) fails. The solution is to use textContent instead.
if(actualWidth>20 && actualWidth>rawWidth && rawWidth!=actualWidth & el.textContent.search(' ') > -1){
and happily textContent also works on other browsers. But it does highlight that you need to be careful when writing HTML5 for cross-platform support.
Luckily there is a really good site which lists browser compatibility on all HTML5/canvas/Javascript features at http://caniuse.com/ which is now on my bookmarks. Do you have any recommendations for cross-browser support?
