Skip to main content

Search and Top Navigation

#5177 closed bug (notabug)

Opened February 12, 2010 09:30PM UTC

Closed October 15, 2012 09:45PM UTC

IE8 overlay display error.

Reported by: mikebird Owned by:
Priority: minor Milestone: 1.10.0
Component: ui.dialog Version: 1.8rc1
Keywords: overlay Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (10)

Changed February 13, 2010 02:33AM UTC by scottgonzalez comment:1

milestone: TBD1.later
priority: majortrivial

Changed February 15, 2010 08:30AM UTC by mikebird comment:2

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.

Changed September 07, 2011 12:47PM UTC by scottgonzalez comment:3

keywords: → overlay

Changed December 29, 2011 03:12PM UTC by scottgonzalez comment:4

#7974 is a duplicate of this ticket.

Changed December 29, 2011 03:45PM UTC by jdavis78 comment:5

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?

Changed January 17, 2012 11:31PM UTC by scottgonzalez comment:6

milestone: 1.later1.9

Changed April 06, 2012 12:35AM UTC by deulis comment:7

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.

Changed June 06, 2012 01:25PM UTC by scottgonzalez comment:8

priority: trivialminor

Changed October 11, 2012 02:47PM UTC by scottgonzalez comment:9

milestone: 1.9.01.10.0

Changed October 15, 2012 09:45PM UTC by davenaeder comment:10

resolution: → invalid
status: newclosed

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

Unable to reproduce the mentioned outcome.