HTML5 avec jQuery - e.offsetX est pas défini dans Firefox

Dans ma HTML5 page, j'ai un div avec mousemove événement comme suit:

$('#canvas').mousemove(function(e){
    xpos = e.offsetX;
    ypos = e.offsetY;
    $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});

Il fonctionne très bien avec Google Chrome. Mais dans Firefox, les deux sont de donner la valeur undefined. J'ai vérifié en utilisant Firebug, c'est connecté la e objet de la console. Les deux offsetX et offsetY sont undefined.

Lorsque j'ai cherché dans Google, il y avait une solution en disant que je devrais utiliser layerX et layerY, si les deux offsetX et offsetY ne sont pas définis.
Mais à partir de Firebug, je n'étais pas capable de le trouver. Et j'avais moi-même donné un essai comme ceci:

xpos = (e.offsetX==undefined)?e.layerX:e.offsetX;
ypos = (e.offsetY==undefined)?e.layerY:e.offsetY;

Mais c'est aussi donner undefined en tant que valeurs.

Je suis en utilisant la plus récente de jQuery - v1.8.2. Et je suis en train de tester dans mon Firefox v14.0.1

Des idées ou des suggestions?

---

MODIFIER

Grâce à dystroy et vusan pour m'aider. La solution à ce problème est comme suit:

SOLUTION

$('#canvas').mousemove(function(e){
  $('#cursor').show();
  if(e.offsetX==undefined) //this works for Firefox
  {
    xpos = e.pageX-$('#canvas').offset().left;
    ypos = e.pageY-$('#canvas').offset().top;
  }             
  else                     //works in Google Chrome
  {
    xpos = e.offsetX;
    ypos = e.offsetY;
  }
  $('#mouse').html("X : " + xpos + " ; Y : " + ypos);
});