1

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).

Frank DeRosa
  • 2,271
  • 2
  • 14
  • 12
  • 1
    What kind of artifacts are you referring to? I am using FF3 on an older PC (1.6Ghz Sempron, 1 GB RAM, AGB Graphics card), and the accordion works o.k., albeit a bit jittery and the text boxes exceed the accordion's borders. Is that what you mean? – Pekka Nov 06 '09 at 16:53
  • 1
    I guess this is the problem author talks about – mth Nov 06 '09 at 16:57
  • How about using Firebug javascript profiler to determine the cause of the slowdown? – Thierry Roy Nov 06 '09 at 17:04
  • @Pekka Gaiser: the text boxes exceeding the accordions borders is the major problem. It was a lot worse before I started the process. You can see that here: http://beyerhomes.com/ I've made some progress but I am not publishing it yet as I need client approval. @molevna: Yep, nailed it. @Eldimo: I've seen it but I don't know how to use it - yet. Let me Google that for me... – Frank DeRosa Nov 06 '09 at 17:36

3 Answers3

2

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
  • 442,112
  • 142
  • 972
  • 1,088
  • 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 Nov 06 '09 at 17:07
  • 1
    Are they absolutely positioned? THen that may be it. What happens if you try and remove them? – Pekka Nov 06 '09 at 17:20
  • @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 Nov 06 '09 at 17:43
  • 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 Nov 06 '09 at 20:12
1

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
  • 490
  • 2
  • 12
  • 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 Nov 06 '09 at 17:05
  • 1
    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 Nov 06 '09 at 17:10
  • 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 Nov 06 '09 at 17:37
  • 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 Nov 08 '09 at 03:25
0

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
  • 2,271
  • 2
  • 14
  • 12