Issue in applyStyle on Firefox

lionellaske

Hi all,

I'm working to migrate to a recent Enyo version my Sugarizer app (currently using Enyo 2.1).

I've got an issue in applyStyle when I'm using Enyo from the git repository (currently Enyo 2.5.1-pre.4) and on Firefox (no problem with Chrome or IE).
Basically, the issue is that applyStyle method do nothing on my component - matching an icon in my app - instead of changing coordinate. Strangely the issue happen only when the method is called from a callback (here a timer callback, an AJAX callback in the real source code).

Here is the JavaScript source that I've isolated to demonstrate the issue:

// Class for a Sugar icon
enyo.kind({
	name: "Sugar.Icon",
	kind: enyo.Control,
	published: {
		icon: null,
		x: -1,
		y: -1
	},
	classes: "web-activity",
	components: [
		{ name: "icon", classes: "web-activity-icon"}
	],

	// Constructor
	create: function() {
		this.inherited(arguments);
		this.iconChanged();
		this.xChanged();
		this.yChanged();
	},

	// Property changed
	xChanged: function() {
		if (this.x != -1) {
			this.applyStyle("margin-left", this.x+"px");
		}
	},

	yChanged: function() {
		if (this.y != -1) {
			this.applyStyle("margin-top", this.y+"px");
		}
	},

	iconChanged: function() {
		if (this.icon != null)
			this.$.icon.applyStyle("background-image", "url(" + this.icon.directory+"/"+this.icon.icon + ")");
		else
			this.$.icon.applyStyle("background-image", null);
	}
});


// Main app class
enyo.kind({
	name: "TestApp",
	kind: enyo.Control,
	components: [
		{name: "desktop", showing: true, components: [
			{name: "journal", kind: "Sugar.Icon", icon: {directory:"images", icon:"activity-journal.svg"}}
		]},
	],

	// Constructor
	create: function() {
		this.inherited(arguments);

		this.timer = null;
		//this.displayIcon();   // Uncomment this line and comment the following one and it works perfectly
		this.timer = window.setInterval(enyo.bind(this, "displayIcon"), 1000);
	},

	// Display icon
	displayIcon: function() {	
		if (this.timer != null) window.clearInterval(this.timer);

		console.log("Move icon...");

		// Nothing happen here if it come from the timer callback
		this.$.journal.setX(200);
		this.$.journal.setY(100);

		console.log("Done");
	}
});

You could download the full source code here

Note that it works perfectly on Enyo 2.4.

Regards.

Lionel.