It appears that fadeIn();, fadeOut();, and fadeTo(); (and any of the opacity animations) are having issues in Internet Explorer. After troubleshooting for a couple hours, I discovered that if you add .css('display', 'inline-block') then everything appears to work, but with some obvious display hiccups.
Once I discovered that, I reverted back to see if setting 'inline-block' on the elements in CSS would improve the issue. Ironically, if I set 'display: inline-block' in CSS on the offending elements, nothing happens. I discovered that it didn't matter because something is adding a style to the tag as 'display: inline;', although 'display-inline' is not hard-coded in the document's tag. Due to something inserting 'display: inline;' into the tag (likely jQuery since it's the only library I use), it's likely overriding CSS, similar to if it were hard-coded into the tags.
If someone else wishes to play around with my theory and file a bug report or one of the developers sees this, feel free. Perhaps it'll help someone locate the issue in the library. Extremely annoying bug.
I did a little more testing on the issue, and realized that you can set elements to 'inline-block' in CSS and it'll apply the style. Unfortunately, it doesn't work in every instance; it seems safer for now to specify 'inline-block' in the script instead. Also, if you add 'inline-block' to your target elements, it adds additional padding space top and bottom, so be careful as there's no great work-around to that other than setting an explicit height to the elements (not good, not snazzy).
I would still consider this a major jQuery bug for the moment.
Leave a comment on danieldenk's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic