CSS Sprite code works in Chrome and IE but not in Firefox?

Question

I wrote simple animation using CSS and HTML using sprites. It works successful in chrome and IE but not firefox.

<style type="text/css">
  #sprite {
    width: 96px;
    height: 117px;
    background: url(../../images/sprite_animation_frames.png) 0px 0px;
  }
</style>
</head>

<body onload="main();">
  <p align="center"><h1>The Running Man</h1></p>
  <script>
  var position = [
    [0,   0],[-100,   0],[-200,   0],[-300,   0],[-400,   0],[-500,   0],
    [0,-120],[-100,-120],[-200,-120],[-300,-120],[-400,-120],[-500,-120],
    [0,-240],[-100,-240],[-200,-240],[-300,-240],[-400,-240],[-500,-240],
    [0,-360],[-100,-360],[-200,-360],[-300,-360],[-400,-360],[-500,-360],
    [0,-480],[-100,-480],[-200,-480],[-300,-480],[-400,-480],[-500,-480]
  ];
  var pos;
  function main(){
    var img = document.createElement('img')
    img.id = 'sprite';
    document.body.appendChild(img);
    setInterval(function () {
      anim(img);
    }, 50);
  }
  var i = 0;
  function anim(el) {
    if (i < 30)
      i++;
    else
      i = 0;
    var x = position[i][0];
    var y = position[i][1];
    el.style.backgroundPositionX = x + 'px ';
    el.style.backgroundPositionY = y + 'px ';
  }
  </script>

what could be the problem ?

Answer 1

Firefox does not support individual backgroundPositionX / Y properties, and IE may be complaining about the extra space. Try:

el.style.backgroundPosition = x+"px "+y+"px";

Answer 2

Able to solve the problem.

Just replaced div tag instead of img and it worked.

Don't know the issue.

CSS Sprite code works in Chrome and IE but not in Firefox?

Question

2 answers

solution1
0 2014-04-16 11:58:24

solution2
0 2014-04-17 01:59:12

CSS Sprite code works in Chrome and IE but not in Firefox?

Question

2 answers

solution1 0 2014-04-16 11:58:24

solution2 0 2014-04-17 01:59:12

solution1
0 2014-04-16 11:58:24

solution2
0 2014-04-17 01:59:12