IE8 Opacity bug on large content pages?

Posted on 2009-05-28
Medium Priority
Last Modified: 2013-12-07
Our entire site uses a common "progress" panel to dim the background while processing.  The "fade" panel covers the entire width and height of the scrollable page.

Works great in both IE8 and Firefox, with one exception.   In IE8, there appears to be a limit on the page content, causing the fade panel to lose it's opacity and turn solid.

I found this out 2 ways:

1) I took a dynamic page that shows transaction history and it works fine until the page gets too long with lots of transactions.

2) I took a page with lots of panels, images and text and started chipping away some panels and\or images.  Eventually the opacity started working again.  I then reset and went back in to start removing other things (not removed the first time) and eventually it started working yet again.  Meaning, there was nothing specific with the coding or layout causing the problem.  It was simply how much content was on the page.

Again, works great in FF, but this seems to be a bug with IE8.

Anyone know of a solution or if this is a bug?

Question by:michelle0
  • 5
LVL 30

Expert Comment

ID: 24494437
Can you post a link? Code?

Author Comment

ID: 24494642


Then click the TRADING POST menu item.  (you will see that the fade background is solid)

Then, in the Trading post page, click HOME menu (the fade div works fine)

The home page (/info/exc) is an example of what is happening.  If I cut out about 20% of anything on the page, then the fade works right again.  

Again, this fadediv is used throughout the entire site (and accounting site) and works great unless a page is too large.   As I said, I know it isn't a code issue because It works fine on a dynamic page (e.g. using a repeater) until the data on the page gets to be too much.

The opacity styling is:

div.FadeDiv, .modalBackground
	width: 100%;
	z-index: 995;
	left: 0px;
	position: absolute;
	top: 0px;
	background-color: #D3D3D3;
	-ms-filter: "(Opacity=60)";
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;

Open in new window


Author Comment

ID: 24494654


Then click the TRADING POST menu item.  (you will see that the fade background is solid)

Then, in the Trading post page, click the Trading Post AGAIN (the fade div works fine)
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.


Author Comment

ID: 24494755
While you're at it, check out the Featured Section titles in the Trading Post.

I have been playing with them ALL day trying to get them looking right, but in IE8 they continue to look choppy.  If I enlarge them and make bold, then it gets way worse!

ClearType is on in my IE8 browser, but to no avail.

Thanks again,

Accepted Solution

michelle0 earned 0 total points
ID: 24499182
I tested further and found this bug was only in IE 8 Standards Mode (which we have our meta tags set to on the site).

So, my solution was to create a quick JS detector to test if IE8 Standards Browsing Mode (not IE 7 Compat Mode or non-ie browsers).  If so, then I simply do not show the opacity fade div for certain pages.

If you or anyone else can confirm this as a bug, let me know.


Author Comment

ID: 24499197
FYI, still looking to award points if someone can figure out how to make the opacity FULL page div work on very large pages in IE 8 Standards Mode.


Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
Each password manager has its own problems in dealing with certain websites and their login methods. In Part 1, I review the Top 5 Password Managers that I've found to be the best. In Part 2 we'll look at which ones co-exist together and why it'…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question