I wrote a simple bouncing ball animation using Two.js. It's just a ball bouncing off the walls. It works just fine for me in Chrome, but in Firefox, the ball disappears and reappears a few seconds later in another part of the screen, meaning that the ball is moving, just randomly becomes briefly invisible.
Here is my code:
var elem=document.querySelector("div");
var h=window.innerHeight;
var w=window.innerWidth;
var two=new Two({fullscreen: true}).appendTo(elem);
var vy=5, vx=5;
var circle1=two.makeCircle(300,200,50);
circle1.fill="orange";
circle1.stroke="purple";
circle1.linewidth=5;
two.bind("update", function(frameCount){
circle1.translation.x+=vx;
circle1.translation.y+=vy;
if(circle1.translation.x+30>w||circle1.translation.x-30<0){
vx*=-1;
circle1.translation.x+=vx;
}
if(circle1.translation.y+30>h||circle1.translation.y-30<0){
vy*=-1;
circle1.translation.x+=vy;
}
}).play();
Again, the same thing works just fine in Chrome.
Also, it works fine in both Chrome and Firefox if I replace the div with a canvas and use this instead:
var canvas=document.querySelector("canvas");
var w=window.innerWidth, h=window.innerHeight;
canvas.width=w;
canvas.height=h;
var context=canvas.getContext("2d");
var vx= 5, vy=5;
var ball={
x: 300,
y: 200,
radius: 50
};
function draw(){
context.fillStyle="orange";
context.beginPath();
context.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false);
context.closePath();
context.fill();
}
(function animate(){
var timer=setInterval(function(){
context.clearRect(0,0,w,h);
ball.x+=vx;
ball.y+=vy;
if(ball.x+ball.radius>w||ball.x-ball.radius<0){
vx*=-1;
ball.x+=vx;
}
if(ball.y+ball.radius>h||ball.y-ball.radius<0){
vy*=-1;
ball.y+=vy;
}
draw();
},1000/60);
}());
If anyone can explain this strange behavior, that would be great.