This project is archived and is in readonly mode.

#193 open
raider5

Mask opacity issue on large areas

Reported by raider5 | November 23rd, 2009 @ 04:30 PM | in 1.4.0.1 (closed)

Hi,

On certain hardware/software configurations IE doesn't honour its opacity value and Mask remains completely opaque. We have this issue on Vista Buisness SP2 and have resolved it with the following revision to Mask:

resize:function(x,y){
    var opt={
        styles:['padding','border']
    };
    if(this.options.maskMargins)opt.styles.push('margin');
    var dim=this.target.getComputedSize(opt);
    if(this.target==document.body){
        var win=window.getSize();
        if(dim.totalHeight<win.y) dim.totalHeight=win.y;
        if(dim.totalWidth<win.x) dim.totalWidth=win.x;
    }
    
    var iHeight = $pick(y, dim.totalHeight, dim.y),
        iSubMasks = parseInt(iHeight / 2048, 10) + 1,
        sSubMasks = '';
            
    while (iSubMasks--) {sSubMasks += '<div></div>';}
    this.element.set('html', sSubMasks);
    
    this.element.setStyles({
        width:$pick(x,dim.totalWidth,dim.x),
        height:iHeight
    });
    
    return this;
}

The Mask CSS has also been revised to accommodate the change. Please note the order of IE's opacity rules, this order allows opacity to work correctly in all IE versions. The current Mask CSS has these in the wrong order and as such IE8 as IE7 won't work correctly.

.mask {
    position: absolute;
    z-index: 999;
    background: transparent !important;
    overflow: hidden;
}
.mask div{
    opacity: 0.5;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    filter: alpha(opacity=50);
    background: #000;
    height: 2048px;
    width: 100%;
    float: left;
}

Further details on the issues can be found on the links below:
http://www.quirksmode.org/css/opacity.html
http://social.msdn.microsoft.com/forums/en-US/iewebdevelopment/thre...
http://stackoverflow.com/questions/775041/ie-display-transparency-b...

Thanks,

SJ

Comments and changes to this ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

Pages