#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 )
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)
Change History (23)
comment:1 Changed 13 years ago by
Description: | modified (diff) |
---|---|
Summary: | VML createImage code is now butchering transparent PNG on IE 7/6 → VML createImage code is now butchering transparent PNG on IE 7/8 |
Changed 13 years ago by
Attachment: | transparentPNG_DojoGFX_VML_Dojo12.jpg added |
---|
Changed 13 years ago by
Attachment: | transparentPNG_DojoGFX_VML_Dojo13.jpg added |
---|
comment:2 Changed 13 years ago by
comment:3 Changed 13 years ago by
comment:4 Changed 13 years ago by
Status: | new → assigned |
---|
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 13 years ago by
Milestone: | tbd → 1.3 |
---|
comment:6 Changed 13 years ago by
Owner: | changed from Eugene Lazutkin to Jared Jurkiewicz |
---|---|
Status: | assigned → new |
comment:7 Changed 13 years ago by
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 13 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
comment:9 Changed 13 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
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 13 years ago by
Attachment: | IE7Works_IE6Fails.jpg added |
---|
Screenshot showing IE7 works, IE6 fails.
comment:10 Changed 13 years ago by
Owner: | changed from Jared Jurkiewicz to Eugene Lazutkin |
---|---|
Status: | reopened → new |
comment:12 Changed 13 years ago by
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 13 years ago by
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:15 Changed 13 years ago by
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:17 Changed 13 years ago by
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 13 years ago by
Resolution: | → fixed |
---|---|
Status: | new → closed |
comment:19 Changed 13 years ago by
comment:20 Changed 13 years ago by
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
(In [16588]) Checking in the work-in-progress (commented out) preparing for the merge. Refs #8551. Refs #8435. Refs #7339.