I mentioned about a bug in IE8’s Lookahead Downloader in one of my previous post. This post is dedicated to another such bug in IE.
What was the issue we were facing?
The problem we were facing was weird. A page would render correctly on all browsers except IE (of course :)).
Yea, I know, nothing new about such behavior right? But this issue is special in many ways. Why?
Because:
- Our app is developed using Asp.net
- It extensively uses Telerik Controls
I have decided to stay away from Telerik controls as much as possible. If you asked me, I would only suggest to never ever, never ever, never ever, use them in your project. The more I use them, more I get convinced not to use them ever.
Why I hate Telerik controls so much?
May be I will write that in a separate post.
Why are we using it in our project?
Client is not yet ready to move on.
Anyways, Let me stop bitching about Telerik controls and focus on the issue we were facing.
The frameworks that we were using, assure that the site renders correctly on most modern browsers including IE. Then why would it not render correctly on IE?
What were the rendering issues we were facing?
 |
| List box does not have proper styles |
 |
| Alert box does not have proper style |
 |
| Menu bar is unaligned and does not have proper styles |
Look at the things highlighted in red in the above screenshot.
The issues we were facing were:
- Sometimes List Box would lose its styles
- Sometimes Alert box would lose its styles
- Sometimes Tab Strip would lose its styles
Initially, I was really confused, didn't know what exactly was going on.
Decided to intercept the HTTP traffic using Fiddler, to find out what is wrong with IE. Why is it not sending requests for certain styles?
Found out that, IE does send requests for all style sheets. But, IE just prefers to ignore a few style sheets (of course without showing any error)! Typical IE, isn't it?
Googling a little we found that:
- IE will load only the first 31 style sheets and will ignore the rest of the styles for a page request. This includes the <style> attribute tag as well if defined on the page
- IE load only 4095 CSS selectors for a single request
- On pages that uses the @import rule to continuously import external style sheets that import other style sheets, style sheets that are more than three levels deep are ignored.
Have a look at this link for more details.
That was it, we discovered another hidden treasure of IE! Don’t we love IE for such hidden treasures?
The solution was simple enough, we removed few unused CSS references from the page. Bingo, the page started working!
PS: Why where unused CSS referred on the page? Long story. We will keep that for some other post. Till then keep having fun with IE.
