VML createImage code is now butchering transparent PNG on IE 7/8

[Jared Jurkiewicz]

VML createImage code is now butchering transparent PNG on IE 7/8

This can be seen in testcase:

​http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/widget/tests/test_AnalogGaugeWidget.html

Gauge under heading: CSS Themed Ranges, Image Overlay, Gradient Background, Updating to Random Values on 3s Timer

This testcase worked fine on 1.2/early 1.3 when the Gauge code was introduced in dojo.

In fact, I can copy it over to dojo 1.2 comment out the import of dojo.require("dijit._Contained");

And run the tests. Works fine.

Screenshots are coming showing the difference in render on dojo 1.2 and 1.3.

Gauge code is identical between the two tests (outside of commenting out the _contained import) No changes have been made to the gauge code and now it fails on IE 7 VML (and IE8).

I did a compare of 1.2.3 and 1.3 VML and found differences in createImage and associated functions. I haven't tried to track down which change caused the issue.

[Eugene Lazutkin]

(In [16588]) Checking in the work-in-progress (commented out) preparing for the merge. Refs #8551. Refs #8435. Refs #7339.

[Eugene Lazutkin]

(In [16629]) Adding a special case for scaling/translation transforms. Refs #8551. Refs #8435. Refs #7339.

[Eugene Lazutkin]

It looks like the problem fixed. Please retest and close the ticket if it is to your liking.

I don't close it because the gauge in question (the 2nd one) looks different with SVG and VML: the SVG one is grayish, while the VML one is blueish. Is it supposed to be like that?

[Jared Jurkiewicz]

Yeah, there is a difference between VML and SVG. One supports CSS style ranges (SVG), one doesn't (VML). Unless you know of a way to get both working?

[Jared Jurkiewicz]

Tested this, breaks on IE6 (IE 7 works).

See attached image. Left isIE7, right is IE6.

IE6 reports 'object doesn't support this property or method'.

Same gauge code works on Dojo 1.2.3 Turning off the image overlay also works ... so its something in the fix you put in for image transforms definitely breaks on IE6.

[Jared Jurkiewicz]

Screenshot showing IE7 works, IE6 fails.

[Jared Jurkiewicz]

See comments. Fix fails on IE6 (works on IE7).

[Eugene Lazutkin]

It doesn't blow up in gfx. The error is:

'this._rangeData.length' is null or not an object.

There is no such thing in gfx, yet it shows up in AnalogGauge?.js in numerous places. Most probably there is a bug, which became now evident with unrelated updates in gfx or other parts of dojo.

The good thing is this error is reproducible 100%. I can try to trace it, but you have a better knowledge of the code, and can find the problem faster.

[Jared Jurkiewicz]

Except that value should always be assigned:

summary: This method is used to add ranges to the gauge. description: Creates a range (colored area on the background of the gauge) based on the given arguments. range: A range is either a dojox.widget.gauge.Range object, or a object with similar parameters (low, high, hover, etc.). if(!this._rangeData){

this._rangeData = [];

}

So not sure how it is getting unassigned, unless some event is firing a mouseOver before ranges were set.

[Jared Jurkiewicz]

Note that function is in addRanges in dojox/widget/_Gauge.js

[Jared Jurkiewicz]

I still assert the problem triggered in your code, not the gauges. I isolated the failing line to the following:

dojox/widget/gauge/_Gauge.js:

createSurface: function(){

summary: internal method used by the gauge to create the graphics surface area this.gaugeContent.style.width = this.width + 'px'; this.gaugeContent.style.height = this.height + 'px'; this.surface = dojox.gfx.createSurface(this.gaugeContent, this.width, this.height); this._background = this.surface.createRect({x: 0, y: 0, width: this.width, height: this.height }); this._background.setFill(this.background);

if(this.image.url){

this._img = this.surface.createImage({width: this.image.width

this.width, height: this.image.height

this.height, src: this.image.url});

if(this.image.overlay){

this._img.getEventSource().setAttribute('overlay',true);

} if(dojox.gfx.vml && dojo.isIE < 7){

try {

var end = this.image.substring(this.image.url.length - 3);

if((end == 'png')

(end == 'PNG')){

use DirectX filter to correctly handle PNG transparency this._img.rawNode.firstChild.src = dojo.moduleUrl('dojo.resources', 'blank.gif'); this._img.rawNode.firstChild.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.image.url+"',sizingMethod='scale');";

}

} catch (e) {

alert("Applying the filter fails."); Couldn't apply the filter. Oh well.

}

}

if(this.image.x

this.image.y){

try{

this._img.setTransform({dx: this.image.x

0, dy: this.image.y

0});

} catch (e) {

alert("I just tried applying a transform on the image: + this.image.url +? with X: + this.image.x +? and Y: + this.image.y +? and it blew up.");

}

}

}

},

Specifically this: this._img.rawNode.firstChild.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.image.url+"',sizingMethod='scale');";

}

} catch (e) {

alert("Applying the filter fails."); Couldn't apply the filter. Oh well.

The good news is, your code now handles the transparency right anyway, so this isn't even needed anymore. So the fix for us is to just remove our filter apply to the PNG for IE < 7.

The fix you made still broke something, but I'm not sure what we were using was public in the first place.

[Jared Jurkiewicz]

(In [16655]) Minor tweak to fix a gfx issue on IE6. refs #8551

[Jared Jurkiewicz]

I also put a check on _rangeData, just in case, but doing so wasn't the failure fix. The fix was just removing that png check we had for IE6, as something in GFX internals changed on the surface that broke what we were doing (but fixed needing to do it!) So, ultimately a win, smaller code.

[Jared Jurkiewicz]

(In [16656]) Tweak to readme to denote dependency on GFX in 1.3. refs #8551

[Eugene Lazutkin]

Huh, your code did go inside of gfx' image, assuming that privates didn't change. They did --- I completely changed the internal structure to get desirable effects. Please try to avoid using undocumented things.

As always the latest documentation can be found at DC: ​http://docs.dojocampus.org/dojox/gfx