Fuzzy text in Firefox

richardn / 2010-01-31 02:59:40   

I've installed Ross Cairns's expanding menu, and, like a few others here, I've run into a problem with the menu items appearing fuzzy (i.e. slightly pixellated) in Firefox (3.5.7, Mac OS 10.4.11). The fuzziness goes away when one of the menu items is clicked.

Initially I thought the problem was isolated to the expanding menu, but I've now looked closer at other elements of my test site and they also appear fuzzy. Specifically, the image titles in the slideshow format, and the text in a collapsing-text-javascript-thingy I was testing. To see this, look at the final two items in my test page (under 'Indexhibit tests'), and also look at the fuzzy text in the actual menu items:

test page

Everything works fine in Safari. Yet when I look at the text transitions in Safari, it seems that Firefox gets stuck before it reaches the final state (i.e. Firefox never quite reaches nicely resolved, solid text that I see in Safari).

What to do? I've heard some advise to update to the latest version of jquery, but I've also heard that this might break other things (certain exhibtion formats? the backend?). Ultimately I want to use the 'horizontal' and 'slideshow' formats, so I don't want to break those two. Others have advised switching the timings of the transitions to zero. It would be a shame to lose the animated transitions, but if it makes the text look right, it might be worth it.

Sorry for the long question.

Richard

Vaska A / 2010-01-31 09:29:41   

Aren't fuzzy texts more of a brower/OS issue?

arsondpi / 2010-01-31 09:50:46   

classic...

richardn / 2010-01-31 13:12:22   

I've uploaded a screengrab of the problem here:

fuzzy text - safari vs firefox

Could someone have a look at my expanded menu on their version of Firefox, and let me know if the text is rendered badly, as in my screengrab?

I'm behind the times, running OS 10.4 on my mac. If the problem doesn't occur on more up to date systems, I don't need to worry about it.

Vaska A / 2010-01-31 13:28:56   

First off, try validating the page and look for any errors. Fix them...

But, I'm pretty sure this is purely a browser issue. There was alot of discussion about how browsers were/are rendering text differently - Google around on that.

Upgrading your OS and to the newer browsers *might* fix things but I'm not sure.

All browsers do interpret things slightly differently...

richardn / 2010-01-31 14:06:14   

I know what you mean about browsers rendering text differently, but I don't think this is the issue I'm facing.

The problem is that Firefox (3.5.7) is not processing the javascript correctly - i.e. it is not running the text transition to its final state... it gets stuck in a state of fuzzy text. If I click on one of the exhibits in the menu, then the text in that section becomes fully resolved (non-fuzzy). Firefox is able to resolve the text, but in the three javascript examples I've mentioned (all of which involve text animations), it never reaches the end state of solid text.

(Forgive the terminology - I don't know how javascript functions, and the proper way to describe its actions.)

richardn / 2010-01-31 14:17:00   

It's better if I show what I've just described. Here's another screengrab:

More fuzzy text

Vaska A / 2010-01-31 14:35:01   

On FF 3.0 (I don't keep it up-to-date) on OSX 10.6 all works just fine. Safari 4.0.xcsdfslkj works just fine as well.

Looks like a bad one...not much I can do to see the problem.

richardn / 2010-01-31 14:49:28   

Thanks for looking Vaska. I didn't realise that at version 3.5.7, my Firefox is nearly up to date (there's a 3.6 available now). However in 'About Firefox' it says:

Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10.4; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

So I'm thinking that this fuzzy text problem might be confined to those using Firefox on an old PPC mac, running 10.4

Anyone else care to see if they can replicate my problem?

Should I consider updating jquery? Or is that definitely not the issue here?

richardn / 2010-01-31 18:05:30   

Ok, I read this post and realised that I should just try updating to the latest version of jquery (1.4.1) to see what happens.

Simple to do, and the problem is fixed - no more fuzzy text!

(And so far it doesn't seem to have caused problems elsewhere).

Vaska A / 2010-01-31 18:08:07   

This isn't an issue with Indexhibit or Jquery. It's a browser issue - you should be posting in the FF forum on this.

richardn / 2010-01-31 18:52:32   

Yes, I realised that, and posted on the Firefox forum earlier today - but no reply. I don't understand the mechanics, but updating Jquery fixed the problem.

Vaska A / 2010-01-31 18:54:02   

And it will likely kill other exhibition formats you might try to use...be warned.

richardn / 2010-01-31 19:27:14   

I just need 'slideshow' and 'horizontal'. They seem to be working. If I discover something is broken, I'll revert to the supplied Jquery, and jettison the expanding menu. I'm still very much at the testing stage.

This thread has been closed, thank you.