FireFox performance problems with a particular jQuery enabled site

views:

127

answers:

+1 Q:

FireFox performance problems with a particular jQuery enabled site

I built my first site with jQuery and overall it turned out quite well - in most browsers, that is. You can see the site's test environment here.

Much to my surprise, it works great in IE, Chrome, Safari and Opera - but it pretty much sucks in FireFox. I'm using a basic slideshow, a hand-coded horizontal accordion, some little popup boxes, various little effects, and the jQuery LightBox plugin. All of my code is viewable here.

The biggest and most glaring FireFox problem is the accordion - when it slides, it's fairly smooth, but there are tons of artifacts. I have actually reduced the visual artifacts from what they were by setting the content that's hidden to display: none;.

If I am making some noob mistake, please embarrass me and point it out. I am open to just about any suggestions, so long as you don't tell me I have to change the features - my client is already set on those because my boss promised them (before asking if I could implement them, of course).

+1 A:

First guess - width and height in <img> tags.

It is a common cause for many distortions associated with JS.

Use CSS properties (width and height (sic)) instead

P.S. Set Options -Indexes to your .htaccess on dev server root

mth 2009-11-06 16:50:22

I'll have a look in my code and see if I left those out...

Frank DeRosa 2009-11-06 16:52:56

This helped - I had several widthless/heightless images scattered all over the place, many of which were animated to and fro. The accordion slide animation is smoother. It still does some weird shit with the various divs that move about...but all of those have z-indexes. Perhaps FireFox is glitching with those particular elements because the of the z-index.

Frank DeRosa 2009-11-06 17:05:23

I would suggest you to consider using AJAX to fetch pages dynamically after accordion expansion complete event. Thus you would alleviate yourself from many connected troubles.

mth 2009-11-06 17:10:06

That sounds like the *right* way to handle several parts of the site... too bad the budget has run out. I'll keep that in mind for my next design.

Frank DeRosa 2009-11-06 17:37:50

Conversely, the `width` and `height` attributes on an `img` tag are highly recommended when it comes to user experience and page rendering speed. http://stackoverflow.com/questions/1247685/should-i-specify-height-and-width-attributes-for-my-imgs-in-html

jason 2009-11-08 03:25:54

+2 A:

It seems that the transparent text boxes (whose movement is causing the artifacts, right?) are entirely within their respective accordion page in IE, but they overlap the page in FF. I have no idea why that is (and no time to look through the code right now) but maybe a "overflow: hidden" in the right place is enough already.

Pekka 2009-11-06 16:59:07

The transparent boxes sit underneath the boxes that actually hold the text - since I can't rely on rgba values in all browsers, I had to use two. Thanks, I'll see where I might adjust some overflow values.

Frank DeRosa 2009-11-06 17:07:52

Are they absolutely positioned? THen that may be it. What happens if you try and remove them?

Pekka 2009-11-06 17:20:02

@Pekka Gaiser: They are absolute... and I did as you suggested. I used a quick selector to pull the colored boxes, leaving the text: $('.color_box').remove(); It still looks bad. I pulled the *other* div, the .text_box with this... $('.text_box').remove(); Suddenly the artifacts are gone.Now I have to figure out why the hell that box is causing trouble. Thanks for the direction.

Frank DeRosa 2009-11-06 17:43:46

And, in the end, it was overflow. The divs containing the text had overflow:auto set on them, and that messed FireFox right up. I now have overflow set on only one div, and it happens to be on the leftmost panel div, which does not move, and therefore does not cause an artifact. Thanks very much for the assist - your suggestion was much more helpful than the jQuery discussion group was.

Frank DeRosa 2009-11-06 20:12:54

In the end, it was a combination of things. The divs with overflow inside the accordion caused a lot of the trouble and some slowdown. Some images without dimensions were also producing artifacts and slowdown. Thanks to all for the help and comments.

Frank DeRosa 2009-11-08 03:12:05

ansaurus

tags:

views:

answers:

FireFox performance problems with a particular jQuery enabled site

related questions