@Shazwazza

Shannon Deminick's blog all about web development

jQuery fade bug in IE – background transparent PNG image

March 27, 2010 00:20
This post was imported from FARMCode.org which has been discontinued. These posts now exist here as an archive. They may contain broken links and images.

(I’ve found a ‘solution’ to this… see bottom of post)

Problem

I’ve been trying to figure this out for the whole day today and have finally succumbed to the realization that I’m pretty sure I’ve found a bug in jQuery, even the latest version.

The example link is below. The mark-up is very simple and all that is being done is:

  • Create a box with a single pixel semi transparent PNG image
  • Call either fadeIn or fadeOut on any HTML element on the page… suddenly (and strangely) the box magically has a semi transparent gradient on it!

So if anyone out there know how to fix this, I’m all ears. I’m about to go searching on the net for an alternative fade in/fade out library that doesn’t produce these results but would obviously like to just use the built in jQuery methods.

Click here to see the bug and source! (You’ll have to view in IE 7/8 to see the bug)

Before fade out on the black box:

image

After fade out on the black box:

image

 

VERY STRANGE!!!!

Solution

I knew this had to be an issue with IE’s stupid DXImage transform stuff but didn’t really want to go down the route of fiddling with it but in the end, had to do it. And also had to add a stupid little hack to target IE directly.

Step 1:

Create a IE conditional div wrapper around everything under body:

<!--[if IE]><div id="ieWrap"><![endif]—>

(the rest of the page html goes here)

<!--[if IE]></div><![endif]—>

Step 2:

Target the elements in CSS for IE that have the background PNG transparent image:

#ieWrap .productView .productThumbnail a
{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='grey_overlay.png',sizingMethod='scale');
}

Click here for solution

And, a day later i found out this isn’t working as expected in IE 7… great… so figured out i had to add: width:100% to the style with the DXImageTransform.

A problem using sIFR for menus that link to databound forms in IE7

August 6, 2009 20:39
This post was imported from FARMCode.org which has been discontinued. These posts now exist here as an archive. They may contain broken links and images.
This is quite possibly the most interesting/annoying/crazy quirk/bug I have ever come across.

Scenario

Your site has a sIFR menu. One of the links goes to a typical databound form (in our case an update user details form).

Problem

The user modifies a field and submits. The database table shows the change. However, when you navigate back to the form using your sIFR menu link, you notice the old value(s) in the fields. The correct values only appear once you clear your cache. This problem only occurs in IE7.

Reason

It turns out that the sIFR link is not a normal link. It is essentially like hitting the enter key in the address bar of a page that is already loaded. The browser merely loads from its cache. No matter how many times you click that link!

Solution

In the code behind of your form on page load call this:

Response.Cache.SetCacheability(HttpCacheability.NoCache);