opacity in IE

[acarur01]

Modal mask opacity does not seem to take effect in IE8 - I've set it to 75 and it still looks like its in 50 - compared to the opacity in firefox, 75 is much darker.

isc.IButton.create({
    ID: "touchButton",
    width: 120,
    title: "Touch This"
});

isc.Label.create({
    left: 150,
    height: 20,
    contents: "<a href='http://www.google.com' target='_blank'>Open Google</a>"
});

isc.IButton.create({
    title: "Show Window",
    top: 35,
    left: 75,
    click : function () {
        touchButton.setTitle("Can't Touch This");
        modalWindow.show();
    }
});

isc.Window.create({
    ID: "modalWindow",
    title: "Modal Window",
    autoSize:true,
    autoCenter: true,
    isModal: true,
    showModalMask: true,modalMaskOpacity:75,
    autoDraw: false,
    closeClick : function () { touchButton.setTitle('Touch This'); this.Super("closeClick", arguments)},
    items: [
        isc.DynamicForm.create({
            autoDraw: false,
            height: 48,
            padding:4,
            fields: [
                {name: "field1", type: "select", valueMap: ["foo", "bar"]},
                {name: "field2", type: "date"},
                {type: "button", title: "Done",
                 click: "modalWindow.hide();touchButton.setTitle('Touch This')" }
            ]
        })
    ]
});

[acarur01]

Anyone looked at this yet?

[Isomorphic]

This is a product of the fact that in IE8, opacity is supported through the use of filters.
Using filters has some side effects in older versions of IE.
The most obvious of these is that IE through version 8 on WinXP would stop using ClearType as soon as there is a filter used anywhere in the DOM.
In addition to this if filters are used pervasively there are some performance implications, and there are also a few obscure edge case rendering issues that can be hit with certain combinations of z-index, alpha transparency etc.

As a result of this we turned off filters by default for these browsers, which essentially disables opacity, unless you set the documented "useOpacityFilter attribute to true.

This is disabled for the Window backmask by default in order to avoid these side effects, and the appearance of opacity is achieved via media -- therefore changing the opacity does not impact the appearance as it does in other browsers.

If you want a different opacity in your app, you can either modify the media (see Opacity.png under the images/ subdirectory of your skin file), or modify load_skin.js to replace this block:

        if (isc.Browser.isIE && isc.Browser.version >= 7 && !isc.Browser.isIE9) {
            isc.Canvas.setAllowExternalFilters(false);
            isc.Canvas.setNeverUseFilters(true);

            if (isc.Window) {
                isc.Window.addProperties({
                    modalMaskOpacity:null,
                    modalMaskStyle:"normal"
                });
                isc.Window.changeDefaults("modalMaskDefaults", { src:"[SKIN]opacity.png" });
            }
        }

with this:

        if (isc.Browser.isIE && isc.Browser.version >= 7 && !isc.Browser.isIE9) {
            isc.Canvas.setAllowExternalFilters(false);
            isc.Canvas.setNeverUseFilters(true);

            if (isc.Window) {
                isc.Window.changeDefaults("modalMaskDefaults", { useOpacityFilter:true});
            }
        }

This should give you the configurable opacity for that modal mask. We would not expect this targeted change to impact performance significantly but you likely will see ClearType fonts no longer being supported.