Friday, September 28, 2007

IE 6 issues with Modalbox 1.5.5 + Protoculous 1.0.2

Update

I had two issues with Modalbox 1.5.5. on IE-6, and this post describes how I fixed them.
a) IE 6 hangs - page related issue
b) IE 6 vertical scrollbar dissappears when Modalbox is displayed - Modalbox issue

I wanted to use Ajax popus for a user signin-signup flow on a website I am building. Since I was already using prototype and effects from prototculous 1.0.2, I looked around for prototype powered popups. I found Modalbox and immediately liked its capabilities. The effects are configurable, and the content to be displayed can be specified as a url, plain html, a dom node or a javascript html object. The Interface api is elegant in its simplicity.
Thanks to Wildbit's team for releasing such a useful product to open source.

The integration with my code was a snap. I fired up the server and tested the code in Firefox. It worked beautifully.
But IE 6/SP2 was another story.
As soon as I clicked on the link to show the Modalbox popup, IE 6 froze.

IE 6/SP2 had worked fine (except that it complains about a js error on page load) on modalbox's home page, so the problem must be my website's page.
If I turned off modalbox transitions, the popup worked, so I figured effects.js was having some problem with the page css.

On digging through, I zeroed in on the padding property that was defined on the body element. It seemed to be causing the IE 6 hang:
body {
margin: auto;
padding: 15px 0px 25px 0px;
}

On removing this property, IE 6 worked fine. Weird huhn!

But another nagging problem remained.
On IE 6, whenever the modalbox overlay appeared, the vertical scrollbar on my web page would disappear. On canceling the popup, the scrollbar would reappear. If you visit modalbox's home page, you will see what I am talking about. It was distracting to me, so I set out to fix it.

On digging through, I found the following function in modalbox.js:

// For IE browsers -- IE requires height to 100% and overflow hidden (taken from lightbox)
_prepareIE: function(height, overflow){
var body = document.getElementsByTagName('body')[0];
body.style.height = height;
body.style.overflow = overflow;

var html = document.getElementsByTagName('html')[0];
html.style.height = height;
html.style.overflow = overflow;
},

The code is setting the body height to 100% which caused the scrollbar to disappear.

I commented out the function, but then found that the MB_overlay div didn't cover the entire screen height.
So I wrote up some code to calculate the screen height and width in pixels and set the div size explictly.

To summarize, I removed all references which set height (and width) to 100% on the body, html and MB_overlay elements. Instead I calculate the screen size and set MB_overlay size accordingly.

The files can be downloaded from here

modalbox.js
modalbox.css

This fixed the scrollbar issue for me.
Hope this is of help to others.

7 comments:

Andrej said...

Hey,

the only problem with fixing scrollbar issue this way is that the document remain scrollable, which has a huge lack in usability. The current MB approach is to disable scroll bars at any cost. I agree, it might look awful, but usable product has bigger priority for me.

Andrey Okonetchnikov

Chetan Patil said...

We can trap the onscroll event and return false in that case.
I will try it out later in the evening and let you now how it goes.

Chetan

Salman said...

Dude, the hanging issue... you just saved me days of work. I was ready to switch to another modal system, convinced that modalbox wasn't truly cross-browser compatible.

You totally made my day. Thanks dude!

Chetan Patil said...

Glad to be of help :)

Saganxis said...

Same than Salman, you saved me a lot of time of work. I 'd never discover that bug with the padding tag. Thank you very much!!

mooman said...

ok, im just another guy who's gonna say this, but man, thanks a lot for finding the hanging bug! extremely helpful. totally made my day.

Thomas said...

Hi ! Maybe you are interested, a 2.0 version of protoculous is now out :)
http://protoculous.wikeo.be/