IE8 overlay display error.

[mikebird]

When a modal dialog is displayed in IE8 and the height of the ui-widget-overlay div exceeds 32768 (32k), the filter:Alpha(Opacity=50) has no impact, either the background is solid or not shown at all.

[mikebird]

A workaround is adding a max-height setting to the .ui-widget-overlay css class.

Another issue here is the performance on IE, the dialog appears only after the overlay is rendered making dialogs very slow on medium to large documents.

[Scott González]

#7974 is a duplicate of this ticket.

[jdavis78]

7974 isn't an exact dupe, in the test case I posted, the height is around 5K, substantially less than the 32K in this ticket. And setting max-height on .ui-widget-overlay didn't change/correct the behavior. Also, the performance seems fine, not seeing an issue there. Any other thoughts or work arounds to try?

[deulis]

I spent all day searching for a solution to this problem and found nothing. Finally I made my own “work around”. I made a single png image called “ui-bg.png” with 50% of transparency. Then I replaced my current

.ui-widget-overlay { background: #666666; opacity: .50; filter:Alpha(Opacity=50); }

by

.ui-widget-overlay { background: url(images/ui-bg.png) repeat;}

It work on FireFox and Chrome too. This is a simple solution but it involves an image.

Hope this helps.

[davenaeder]

Re created the issue described here: ​http://jsfiddle.net/davenaeder/3hvSx/2/

Unable to reproduce the mentioned outcome.