Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#8551 closed defect (fixed)

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

Reported by: Jared Jurkiewicz Owned by: Jared Jurkiewicz
Priority: high Milestone: 1.3
Component: DojoX GFX Version: 1.2.3
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by 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.

Attachments (3)

transparentPNG_DojoGFX_VML_Dojo12.jpg (52.9 KB) - added by Jared Jurkiewicz 11 years ago.
transparentPNG_DojoGFX_VML_Dojo13.jpg (43.1 KB) - added by Jared Jurkiewicz 11 years ago.
IE7Works_IE6Fails.jpg (47.9 KB) - added by Jared Jurkiewicz 11 years ago.
Screenshot showing IE7 works, IE6 fails.

Download all attachments as: .zip

Change History (23)

comment:1 Changed 11 years ago by Jared Jurkiewicz

Description: modified (diff)
Summary: VML createImage code is now butchering transparent PNG on IE 7/6VML createImage code is now butchering transparent PNG on IE 7/8

Changed 11 years ago by Jared Jurkiewicz

Changed 11 years ago by Jared Jurkiewicz

comment:2 Changed 11 years ago by Eugene Lazutkin

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

comment:3 Changed 11 years ago by Eugene Lazutkin

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

comment:4 Changed 11 years ago by Eugene Lazutkin

Status: newassigned

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?

comment:5 Changed 11 years ago by Eugene Lazutkin

Milestone: tbd1.3

comment:6 Changed 11 years ago by Eugene Lazutkin

Owner: changed from Eugene Lazutkin to Jared Jurkiewicz
Status: assignednew

comment:7 Changed 11 years ago by 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?

comment:8 Changed 11 years ago by Jared Jurkiewicz

Resolution: fixed
Status: newclosed

comment:9 Changed 11 years ago by Jared Jurkiewicz

Resolution: fixed
Status: closedreopened

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.

Changed 11 years ago by Jared Jurkiewicz

Attachment: IE7Works_IE6Fails.jpg added

Screenshot showing IE7 works, IE6 fails.

comment:10 Changed 11 years ago by Jared Jurkiewicz

Owner: changed from Jared Jurkiewicz to Eugene Lazutkin
Status: reopenednew

comment:11 Changed 11 years ago by Jared Jurkiewicz

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

comment:12 Changed 11 years ago by Eugene Lazutkin

Owner: changed from Eugene Lazutkin to Jared Jurkiewicz

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.

comment:13 Changed 11 years ago by 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.

comment:14 Changed 11 years ago by Jared Jurkiewicz

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

comment:15 Changed 11 years ago by 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.

comment:16 Changed 11 years ago by Jared Jurkiewicz

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

comment:17 Changed 11 years ago by 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.

comment:18 Changed 11 years ago by Jared Jurkiewicz

Resolution: fixed
Status: newclosed

comment:19 Changed 11 years ago by Jared Jurkiewicz

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

comment:20 Changed 11 years ago by 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

Note: See TracTickets for help on using tickets.