Shadowbox RC1 slow on IE7

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|

Shadowbox RC1 slow on IE7

Englyst
First of all: I'm very impressed with Shadowbox and I've implemented it on a site I'm working on. And bought a license to set my mind at ease :)

I'm getting slow transitions with:

- IE7
- IE8 (in IE7 emulation mode).

IE7 are tested on 2 different machines (XP and Vista) with identical results.
IE8 tested on Vista 64-bit.

Works fine with:

- Firefox 3
- Safari
- Opera 9.5
- IE6

I've got the right doctype set and everythings should be fine. At the front-end of the site I'm using the shadowbox-base adapter to see if it made a difference compared to jquery. No difference.

On another note, I tried Lightbox to compare and it worked fine on all the browsers so apparently there's something in Shadowbox that makes the difference.

I'm not an experienced Javascript coder at all so I have no idea what to look for.

If you want to see a page with my implementation please go here:

http://carpenta.englyst.eu/referencer.php?id=11

The 2 thumbnail images are the ones with Shadowbox applied.

If anyone can help I'd be happy :)

/ Michael Englyst
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox RC1 slow on IE7

Wizzud
I agree ... IE7 is definitely suffering somewhere!

What has changed from Shadowbox v1 to v2 (in terms of animation) ?...

A. animate has moved from the library's own capability to a Shadowbox custom function
B. adjustHeight used to change the height of shadowbox_body_inner, and now changes the height of shadowbox_body
C. The skin and css have changed

So far I think I can rule out...
A. I switched back to jQuery's own animation and it made no difference, so it's not down to the animate function
B. I switched back to changing shadowbox_body_inner's height instead of shadowbox_body's (still using jQuery's animation) ... no difference

So the only thing left (from my list above!) has to be something to do with the changes to the skin/css.

Now need to play about with the skin/css .....
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox RC1 slow on IE7

Wizzud
Okay, got it!

It appears to be due to the background image applied to shadowbox_overlay ...

  background-image: url(overlay.png);

If you comment out the background image ...

#shadowbox_overlay {
  position: absolute;
/*  background-image: url(overlay.png);
  background-repeat: repeat;*/
}

... and try IE7 again you should find that the animation works perfectly smoothly.

So it would seem that IE7 might have some problems adjusting the background image on the overlay, even though it's not the overlay that is being animated!
At the moment I can't see why the 2 should interact in that way : the main difference between v1 and v2 skins is that in v2 the overlay has been moved inside the shadowbox_container, whereas in v1 it was outside it, but shifting the overlay outside the container (with the background image back in place) doesn't resolve the animation.
Bit stymied now ... can't quite see how to get the overlay opacity back without resorting to opacity rather than the background image.
Anyone else have a bright ideas?
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox RC1 slow on IE7

Englyst
Cool you figured out what was the culprit! I'll disable that background image until a solution is available.

Thanks a lot for being persistent and finding a temporary solution.



/ Michael Englyst
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox RC1 slow on IE7

mjijackson
Administrator
In reply to this post by Wizzud

@Wizzud: I really appreciate your persistence on this issue. As you have noted above, the change that is causing the problem can be found in the skin/css. In v2 I wanted to give designers maximum control over the application by incorporating the skin background into the actual skin file(s) instead of including the overlayOpacity and overlayColor options as I had previously done.

The reason that I made the change is this: Firefox 2 is not able to display SWF content over a div with a transparent background. It is for this reason that in v1 I was detecting the browser type and using the overlayBgImage option to display a transparent PNG instead of transparent div when Flash content was being displayed. This was a little confusing for users who were passing in the overlayOpacity and/or overlayColor options with no results when displaying Flash content on Firefox2.

So I figured that instead of using two different overlay modes, I would just use one: the transparent PNG. Then, I would just hack it using Microsoft's AlphaImageLoader for IE6 and everything should be fine, right? Nope. I didn't count on IE7 having such trouble rendering stuff over a transparent PNG.

I will definitely take a look at this tonight and will probably revert to the way I was doing it in v1 for v2 as well. Once again, thanks for investigating this so closely.

Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox RC1 slow on IE7

Wizzud
@michael
No problem.
While we're on the subject of IE...

You might want to consider adding this...

if(C.isIE){
  // prevents brief 'whiteout' while loading iframe's source...
  markup.allowtransparency = 'true';
}

...to player/shadowbox-iframe.js, after setting up the markup object.

If you run your example page in IE and select the This Page link from the Web section, you'll notice a flash of white background in the iframe before the content loads. If you make the change above, that white flash will disappear because the iframe's background will become transparent.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox RC1 slow on IE7

Wizzud
In reply to this post by mjijackson
@michael
Sorry, something else I've just remembered...

In shadowbox.js, round about line 1827 is...

                --i; // decrement to account for splice

[It's at the bottom of the section where you remove an unsupported element from the gallery.]

You need to add the following ...

                len = gallery.length; // gallery.length has changed!...

This is because you've removed one element from the gallery and, quite rightly, decremented the i counter, but not decremented what that counter is being compared against at the top of the for() loop, ie. len.


Also - and this is a request, not a bug - in the SL.createHTML function there are 3 lines where you tag a newline onto the 'html' variable. Each one of those \n characters creates an (unnecessary?) text node, and they can (admittedly rarely) get in the way, such as between an iframe and it's document.

Regards.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox RC1 slow on IE7

monsterboxx
In reply to this post by mjijackson
Thank you for this great script! I have used V1 previously, I am however a bigger fan of V2. I hope there is a fix soon for the background. DAMN YOU IE7!!!!

*after fooling around with the skin.css I found a way to do it different. however again IE7 has to spoil the day.

#shadowbox_overlay {
  position: absolute;
  background-color:#000000;
  /*background-image: url(overlay.jpg);*/
  filter:alpha(opacity=80);
  opacity:0.8;
  background-repeat: repeat;
}

I also found that .jpg works well, so i simply filled the image with black and made it opaque.

Here's the downer. IE7 will run the background fine the first time you click on a shadowbox element. you are out of luck the second, third, fourth...time around. A refresh would be needed. However it does at least black out the background so your page is not interfering with your shadowbox.

seems to work in all flavors of mozilla and opera. have not tried it in safari, if someone has the capability or knowledge I would love to know what the results are.

thanks again, great script! Keep coding...
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox RC1 slow on IE7

mjijackson
Administrator
In reply to this post by Wizzud
@Wizzud: Great suggestions, all of them. Will surely be incorporated into the final release.
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox RC1 slow on IE7

monsterboxx
In reply to this post by monsterboxx
anybody try my method? I have had good luck with it this far, just seeing if anyone has tried it yet on maybe safari or obscure browsers...
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox RC1 slow on IE7

mjijackson
Administrator
@Monsterboxx: It's the same method that Shadowbox used in v1, so I already know it works fine in other browsers. My only question is with FF 2 on Mac. The way I had the markup organized in v1, SWF files would not display correctly over backgrounds that were not 100% opaque. Thus, in v2 I opted for the transparent PNG (and hacked it for IE6). However, with the reorganized markup and CSS, I believe that I can safely revert to the v1 method (the semi-transparent div) without the same negative effect. I'll give it a try this evening. In any case, this will be fixed in the v2 final release.