Steps to reproduce the problem:
1. open https://googledrive.com/host/0B-1c7Q5hwguvV0hITmpSZGU1RDg/ on mobile.
2. open the link above on the Desk top version of chrome.
3. Notice the 2 differences between the backgrounds.

What is the expected behavior?
I would expect the back ground I have on mobile to match the one that shows on the desk top.

What went wrong?
The blue and yellow gradients I have display as White and dark grey rectangles with no gradient from light to dark as on the desk top. The do how ever sometimes flash blue and yellow but go back to the white and grey. The code that creates this gradient is:

function bgCreator(){
	this.rotation=0;
	this.wave=0;
	this.fill=ct.createRadialGradient(width/2,height/2,1,width/2,height/2,width/2);
	this.stroke=ct.createRadialGradient(width/2,height/2,1,width/2,height/2,width/2);
	this.xs=1
	this.ys=2
	this.zs=1
	this.z=1000
	this.x=width/2
	this.y=height/2
	this.render=function(){
	this.wave++;
	if(this.wave>=495){
		this.wave=0;
	}

	ct.fillStyle="black"
		ct.fillRect(-width,-height,width*2,height*2)
	ct.setTransform(this.z/1000,0,0,this.z/1000,this.x,this.y)
	ct.rotate(this.rotation*Math.PI/180)
	this.rotation+=0.10
	this.x+=this.xs
	this.y+=this.ys
	this.z+=this.zs
	if(this.x>width){
		this.xs=-0.5
	}
	if(this.x<0){
		this.xs=0.5
	}
	if(this.y>height){
		this.ys=-1
	}
	if(this.y<0){
		this.ys=1
	}
	if(this.z>2000){
		this.zs=-0.25
	}
	if(this.z<0){
		this.zs=0.25
	}
	if(this.rotation>=360){
		this.rotation=0
	}
		this.fill=ct.createRadialGradient(0,0,1,0,0,width);
		this.fill.addColorStop(0,"#222");
		this.fill.addColorStop(this.wave/500,"#00F");
		this.fill.addColorStop((this.wave+1)/500,"#111");
		this.fill.addColorStop(0.99,"#00F");
		this.fill.addColorStop(1,"#000");

			this.stroke=ct.createRadialGradient(0,0,1,0,0,width);
		this.stroke.addColorStop(0,"#DDD");
		this.stroke.addColorStop(this.wave/500,"#FF0");
		this.stroke.addColorStop((this.wave+1)/500,"#EEE");
		this.stroke.addColorStop(0.99,"#FF0");
		this.stroke.addColorStop(1,"#000");

		ct.fillStyle=this.fill
		ct.fillRect(-width,-width,width,width)
		ct.fillStyle=this.fill
		ct.fillRect(0,0,width,width)
		ct.fillStyle=this.stroke
		ct.fillRect(-width,0,width,width)
		ct.fillStyle=this.stroke
		ct.fillRect(0,-width,width,width)
ct.rotate(-this.rotation*Math.PI/180)	
ct.setTransform(1,0,0,1,0,0)
	}
}
//Note both this.stroke and this.fill are radial gradients used as fills.

Did this work before? N/A 

Chrome version: 52.0.2743.98  Channel: stable
OS Version: 5.0.2
Flash Version: