jQueryUI tabs and Firefox: getBBox broken?

Question

Just developed a front-end almost entirely in FF 3.6. It works perfectly in IE9 (even with lots of SVG), Opera, and Webkit, but is completely broken in FF9. I've spent the entire day debugging it, and it looks like getBBox has broken somewhere along the line. There are possibly two separate issues, both related to getting a bounding box on a group containing multiple text elements, with rotated text, or text spread over multiple lines.

Anyone else seen this? I've got to say I'm really, really, pissed off by this. Nothing in Bugzilla. If they didn't have such a moronic release cycle I'd be tempted to go back and try an older version, but it seems a lot easier just to dump it...

EDIT

Here's the answer, for anyone who comes by this way. It's basically to do with jQuery UI tabs, display:none, and dimensional computation, but the issue is that the workaround at jqueryui.com (here) is incomplete.

1 - getBBox issues are generally due to a display:none somewhere, but my code didn't have an explicit display:none in it

2 - FireFox is a lot more susceptible to display/getBBox issues than other browsers. Oddly, FF 9.0.1 on Win7 is better than 9.0.1 on XP

3 - the standard way to do dimensional computations in a hidden tab (or hidden anything) is to display off-screen (see the link above), instead of applying display:none

4 - Without the linked workaround above, FF throws an exception, Chrome gets the numbers wrong, Opera doesn't care, etc

5 - But the workaround above (off-screen display in .ui-tabs-hide) isn't sufficient. If you do this, but select the tab (tabs('select')) after doing your dimensional computations, then FF can still get it wrong (but it doesn't throw an exception). IE9, Opera, and Webkit are Ok.

6 - I was wrong about FF 3.6 - 3.6/Linux seems to behave the same as FF 9.0.1/XP

7 - short of digging into the tabs code, one fix is simply to select the tab before doing the dimensional computation. Ok for me, but would probably defeat the point of the exercise for most people.

Changed the subject to mention tabs.

Answer 1

Time to help you get a lot more organized and in control of what's going on! Working with multiple versions of Firefox can be a pain though this will help you sort it all out. This may take you an hour on a capable machine however YOU will be in control and much more capable of getting things done by having your computer up to date and having it much more organized.

The first place to look for Gecko based bugs is Bugzilla.

I don't work with SVG though I can tell you Mozilla has been churning away heavily to update standards though without grace (many DOM 3/4 changes have bug with names like "kill isSameNode").

Politics aside, you seriously need to be using separate installs and profiles. To do this you need a few key things...

Keep offline installers

It's exceptionally important that you keep working installers (and that means not internet downloaders) of working versions of software.

You can get SOME of the stable releases though keep in mind a LOT of what Mozilla is doing suggests some drug testing is in order by going to the Firefox Releases page and then searching "Firefox old versions" to find older installers.

Install the versions you plan on testing

• C:\MEDIA\INTERNET\Mozilla Firefox 3.6\

• C:\MEDIA\INTERNET\Mozilla Firefox 4.0\

• C:\MEDIA\INTERNET\Mozilla Firefox 5.0\

• C:\MEDIA\INTERNET\Mozilla Firefox 6.0\

• C:\MEDIA\INTERNET\Mozilla Firefox 7.0\

etc...

Disable automatic upgrades

Automatic upgrades are 100% counter-productive to properly testing different versions of the Gecko rendering engine.

You ARE testing rendering engines and not browser versions correct?

Gecko / Firefox KHTML / Konqueror (Linux distro with KDE desktop) Presto / Opera Trident / Internet Explorer WebKit / Chrome/Safari (WebKit is a complex fork between the two essentially)

Get acquainted with Firefox's profiles.

Set up your shortcuts

Your primary Firefox shortcut should look something like this if you're using Windows...

"C:\MEDIA\INTERNET\Mozilla Firefox 8.0\firefox.exe" -P "Mozilla Firefox 8.0"

This will automatically launch the profile with that name with that version installed. You will want to update this when you migrate to a newer version. I HIGHLY recommend using the enterprise edition which will be updated once every 54 weeks instead of 42 days. I maintain other profiles though frankly it's beyond ludicrous to update Firefox to gain support for a miscellaneous CSS3 word-wrap property and a proprietary Microsoft JScript method that isn't reliable to use for application level programming to begin with.

If a profile without that name exists for either this (or the next step) the profile manager will appear and you'll have the opportunity to create it yourself.

Other versions

Other versions need shortcuts that are slightly different...

Version/Profile combos

For quickly loading Version/Profile combos use the following...

"C:\MEDIA\INTERNET\Mozilla Firefox 7.0\firefox.exe" -no-remote -P "Mozilla Firefox 7.0"

The -no-remote lets you run multiple versions of Firefox simultaneously. You can use the same copy of Firefox multiple times however you can only use each profile in once given instance.

Force firefox to use the profile manager

To force Firefox to always show you the profile manager (if you have multiple profiles you want to choose from, in example since I have Comcast who wants me to blow money on the worthless "American" television instead of giving me reliable streams I have to manually download YouTube videos so I have a dedicated profile where I download videos and watch them from the download window, this would waste space in my main profile). Those shortcuts should look like this...

"C:\MEDIA\INTERNET\Mozilla Firefox 8.0\firefox.exe" -no-remote -ProfileManager

...and again -no-remote opens a new instance of Firefox separate from other instances.

Managing your profiles

Managing profiles to keep them clean and orderly is not difficult. Again on Windows you'll find the profile text file (which you'll want to make a copy of before you modify it in case you goof something up) at...

C:\documents and settings\YOUR_WINDOWS_USER_NAME\Application Data\Mozilla\Firefox\profiles.ini

I highly recommend naming your profile folders by product/version (e.g. "Mozilla Firefox 7.0").

By keeping separate profiles you can retain your personal settings/extensions/etc and make sure they still work in older versions. If something breaks in Firefox 3.6 (which a lot of users still use) and it's not broken in newer versions you'll still have your extensions working in that version whereas if you go out looking for the extension a few years later a compatible version might not be available. You can rename an extension file from .xpi to .zip, extract the install.rdf file, and hack the min/max compatibility version though which has worked 100% of the time for me.

Firefox 1.5 and newer work with -no-remote and I think there was a different command parameter for Firefox 1.0. Generally I test back to Gecko 1.8+ (Firefox 1.5) though primarily Firefox 3.6 and the latest version for moderate testing purposes.

Syncing between profiles

New versions come out and again if you're not interested in updating Firefox every 42 days go enterprise (version 10.0 will be enterprise and will remain supported for 54 weeks I think it was). I always recreate profiles to prevent garbage from passing from older versions to newer versions though you can use sync to get your passwords and you can export/import your bookmarks.

Backups and restoring

If this sounds like a lot of effort you can back up all your customizations by imaging your hard drive. There is a freeware version of Macrium Reflect that you can image a hard drive partition (maybe specific folders, not sure). Took me less than half an hour to mirror one drive to another and less then 20 to make an image to be restored. If my system permantly blue screens I can restore everything to the last image or mirror in about half an hour (instead of an hour install, hours of reinstalling, setting stuff up, etc).

Hopefully this will help you feel more comfortable testing with newer versions without feeling like you're forced to deal with updates all the time while still being able to test multiple versions.

---

Important! If you're NOT interested in updating everything once every 42 days (which is impossible for any meaningful changes to be made to Firefox) I highly recommend using the extended release support version of Firefox as your main copy which is supported for 54 weeks. You can still open newer trivial versions and then after 54 weeks migrate to the next major version where the time passed will actually make it worth your time to migrate to the newer version. You can download the extended release support version here.