Microsoft Filters

[ProbablySlackin]

I have noticed in IE7 that in ListGrid my data is displayed with the cleartype functionality disabled. I have tracked this down to the fact that Microsoft intentionally disables cleartype when one of their DXImageTransform filters is used. I noticed ListGrid is using the DXImageTransform.Microsoft.Iris filter. Is this filter necessary if I am not using any type of special effects for my grid? Can I disable that so that my data will be displayed using cleartype?

I know this is not recommended, but simply as a test I have modified a backup copy of the ISC_core.js file to not use the filter, and that enables the truetype in IE7. Obviously I don't want to be modifying SmartClient files for production use, just did that as a test.

Thanks,
Jeff

[Isomorphic]

Hello ProbablySlackin,

We had noticed this effect and come to the same conclusion, nice job tracking that down. We use that filter not for special effects, but in this case to work around a different, unrelated bug in IE. There is a task scheduled to attempt a different workaround - it's unclear whether this will make it to 5.7 final, which is due out shortly, but we do intend to correct the problem soon.

[G-Man]

How to disable DXImageTransform and enable cleartype in IE for TreeGrid

Hello SmartClient Community,

I have the same problem. I like very much this framework and I very much wish to use it, but the fuzzy font in IE7-8 doesn't allow me to do it because applications will look nonprofessional.

I have removed the DXImageTransform.Microsoft.Iris filter from ISC_Core.js file and the ListGrid now looks fine. But I cannot find in any way how to make the same for TreeGrid. Please, prompt ANY workaround to disable the filter for TreeGrid or any other way to make tree's font cleartyped.

Thanks in advance.

[Isomorphic]

The Iris filter isn't active. Did you mean something else? Can you show the exact lines you changed?

The filter that really causes the problem is the one used for PNGs. To avoid the filter being used, you can do this:

isc.Canvas.addProperties({neverUsePNGWorkaround:true});

But this will create visual glitches in IE6 wherever transparent PNGs are used to create a rounded edge, and will create different visual glitches in IE7/8 if you use opacity settings (all browser bugs you can read about at length on various blogs).

The only way around this is to use .gifs pervasively wherever transparency is required, and never use opacity (at least for IE). The "Fleet" and "standard" skins have the least reliance on PNG transparency if you want a good skin to start from.

[G-Man]

Hello Isomorphic,

Thanks for your response. I explain in more details the situation. In the ISC_Core.js file there is following code:

if (isc.Browser.isIE) {
    _15[56] = (_9 == null ? null : ";filter:progid:DXImageTransform.Microsoft.Alpha(opacity=" + _9 + ")");
      if (this.$r9) {
          _15[57] = ";filter:progid:DXImageTransform.Microsoft.iris(irisStyle=circle)"
                } else {
                    _15[57] = null
                }
            }
// ...
}

When I remove Iris filter from this code (that is _15[57] variable is always null) a ListGrid starts to look fine, with cleartyped font (rendering fonts without cleartype at enabled DXImageTransform filters is known IE behavior). Now I wish to make the same for a TreeGrid and I would be happy. But here I am very confused, because even having removed all filters from code the TreeGrid renders without font antialiasing. Moreover, I even tried to remove the style.filter attribute for all dom elements - the same, TreeGrid's font is fuzzy without cleartype!

What is the reason for rendering tree's font without cleartype and what way it is possible to overcome it? ("isc.Canvas.addProperties({neverUsePNGWorkaround:true});" has no effect.)

Any advices would be greatly appreciated!

[Isomorphic]

Removing filters from DOM elements after the fact doesn't work, from our testing, IE is already in it's broken state if filters are ever used, even if you turn them off.

You should see that neverUsePNGWorkaround removes filters from all PNGs. Check on this, if it's not working, you may have a typo or similar.

Once you've verified this, verify you've got no filters anywhere in the CSS from the SmartClient skin you're using, as well as any external CSS.

If this doesn't doesn't do it, try showing both the test file and all the modifications you have made.

[G-Man]

Hello Isomorphic,

I have created a minimal project for testing. I have made following changes:

1. Removed Iris filter as I have described in the previous post.
2. Removed all filters from skin_styles.css
3. Added "isc.Canvas.addProperties({neverUsePNGWorkaround:true});" before tree definition.

Unfortunately, does not work. Could you be so kind as to take a look, please?

The project here - http://zitz.0fees.net/SmartClientTest.zip
Live demo here - http://zitz.0fees.net/smartclient/

Thanks

[Isomorphic]

This turns out to be because even "filter:none" breaks ClearType.

The following series of settings will turn off filtering entirely so that ClearType works:

isc.Canvas.neverUsePNGWorkaround = true;
isc.Canvas.addProperties({
    $r9:false,
    $42b: "margin:0px;border:0px;padding:0px;background-color:transparent;background-image:none;"
});
isc.GridRenderer.addProperties({
    $r9:false
});
isc.DynamicForm.addProperties({
    $r9:false
});

We'll wrap this up as a single setting for future versions.

G-Man, it would be great if you confirm this works (without any source modifications).

[G-Man]

I have made other test project without any source changes, have placed there a TreeGrid, a ListGrid and Form fields, and have added the code specified by you. Result: ListGrid and Form are displayed with ClearType, but the TreeGrid - still not! Maybe for tree there is any other renderer, something like TreeRenderer...

You can take a look at the demo here - http://zitz.0fees.net/smartclient

[Isomorphic]

Can you try this out with an 8.0 nightly from smartclient.com/builds? March 9th is equivalent to the SGWT 2.1 release, hence stable.

[G-Man]

I have tried "SmartClient_SC_SNAPSHOT-2010-03-09" build. Unfortunately, the same - TreeGrid renders without ClearType...

[Isomorphic]

Finally got to the bottom of this - the problem was basically that some of the constants we were modifying are copied (in modified form) by other components as they are defining themselves. So some of these settings have to be interleaved in the midst of the framework loading - see below.

Obviously, this is a hack - as we've mentioned we plan to support a mode (and a skin) that does not use IE filters at all.

<SCRIPT>window.isomorphicDir='../isomorphic/';</SCRIPT>
<SCRIPT SRC=../isomorphic/system/modules/ISC_Core.js></SCRIPT>
<SCRIPT>
isc.Canvas.addClassProperties({
    $42a: "margin:0px;border:0px;padding:0px;background-color:transparent;background-image:none;",
    neverUsePNGWorkaround : true
});
isc.Canvas.addProperties({
    $r9:false
});
</SCRIPT>
<SCRIPT SRC=../isomorphic/system/modules/ISC_Foundation.js></SCRIPT>
<SCRIPT SRC=../isomorphic/system/modules/ISC_Containers.js></SCRIPT>
<SCRIPT SRC=../isomorphic/system/modules/ISC_Grids.js></SCRIPT>
<SCRIPT SRC=../isomorphic/system/modules/ISC_Forms.js></SCRIPT>
<SCRIPT SRC=../isomorphic/system/modules/ISC_DataBinding.js></SCRIPT>
<SCRIPT SRC=../isomorphic/skins/fleet/load_skin.js></SCRIPT>
<SCRIPT>
isc.GridRenderer.addProperties({
    $r9:false
});
isc.DynamicForm.addProperties({
    $r9:false
});
</SCRIPT>

[G-Man]

Thanks a lot, at last it work! I will use this excellent framework and wait for the following version.

[G-Man]

The same hack for hover elements

Hello Isomorphic,

Can you please provide similar hack for hover elements (for example itemHoverHTML property in form fields).

(P.S. Form field's text proper looks fine, the problem is only in hover text.
Also I have noticed one detail: at the first show of the hint it looks antialiased, but at all the others - no longer)

Thanks and Regards.

[Isomorphic]

Hovers are slightly translucent by default in some skins so you're probably seeing the effect of using opacity (which in IE must be accomplished by using filters). You should disable the use of opacity settings wherever it appears in the skin - you can leave it enabled for everything but IE if you prefer.