Scripting: Opacity

I'm working on a minor project for the main AAAS home page. They want to better highlight some work that was recently done to promote the organization without drastically changing the current home page design/content. The method they decided to go with was to have a section of the page transition between two sets of content. Of course, there are a couple of ways of doing that ... some easy, some not so easy. I decided to use a combination of CSS and JavaScript to make it easily editable while still providing some nice functionality.

The layout has the two content blocks displayed one after the other. I use CSS to hide the secondary content and JavaScript to switch between the two. The trick came when working out the transition. We can't have it be too abrupt or the distraction level would be high. Luckily CSS provides us with a nice feature to fade the content blocks in/out ... opacity. True this property is CSS3, but some of the browsers already support it. Plus, on top of that most newer browsers at least provide their own proprietary alternative.

I found the core of my transition script on Richard Rutter's blog (Onload image fades without Flash). The setup was a snap.

Of course, not all was bliss. I ran into a few problem with (drum roll please) IE.

First, the transition didn't work. For whatever reason, applying the opacity setting via JS had no affect. Turns out that IE seems to ignore the opacity setting when applied to an object that has no defined width and height [brianerror.net: Cross-browser BlendTrans Filter JavaScript]. Applying height: 100%; width: 100%; seems to solve the problem sufficiently without causing any collateral damage to the page design.

Second, in IE7 any bolded text was becoming horribly distorted as the opacity was applied. It looks like IE7 is unable to accurately render the text if no background color is defined on an object to which opacity is applied, if that object contains bolded text, and if font-smoothing is turned on [jcxp.net forums: IE7 Beta 3 Download, Download!][microsoft connect: Textual Distortion with Microsoft Filters]. Applying a background color seems to solve this problem and has no detrimental affects, assuming there is no variable-colored background behind the object in question.