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.
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.
Related
I put together a web app that looks great in Chrome, Firefox and Safari, but when it comes to IE 10 and 11, it just falls apart. As a matter of fact, it works worse in IE 11 than 10.
In IE 11, a <canvas> element won't even show up, and some <div> elements look really strange and don't have a border-radius, even though I specified it in the CSS. Unfortunately, there are no errors in the console and frankly I'm not seeing where the problems are coming in to play within the CSS and JS.
What would one do in such a situation where you don't really see any good starting point to debug IE?
I was hoping that running things through W3C Validator and JSHint / lint would help, but even those are entirely clean. It would be nice to find some tool to make this a cleaner process as well aside from these noted, but so far I'm shooting blanks.
For some reason Microsoft decided to enable "Compatibility mode" in IE 8 and on (now renamed to "Emulation" in IE 11). The purpose of this is to be able to see websites in a legacy mode so that one can develop sites and see how it will look on older browsers and even make it work "correctly" on sites that are not using current web standards for their design, etc.
Unfortunately they have made it default to ON for local area network connections. Seems like a skewed choice, but as Terry noted in the comment, it is indeed a problem with a solution:
From this blog post:
The solution [is] to disable IE11’s Compatibility View for intranet
sites by doing Setting (gear icon) > Compatibility View Settings >
uncheck “Display intranet sites in Compatibility View” checkbox.
Making that configuration change immediately [gets] IE11 to start
rendering the page properly.
I am just hitting a bug due to Firefox 7 has removed some non-standard attribute (they have no moz- prefix) and cause my scripts fail on Firefox7.
Ref: https://developer.mozilla.org/en/DOM/File
In order to prevent it happen again. I am interesting to get a list of API to be obsoleted. So that I can handle them before the browser release, without testing twenty alpha/beta/nightly build of browsers everyday.
It there any page, blog, or RSS who give warning before the feature disappear?
You cannot get fast and easy warnings about future changes. But here are some blogs for you, where you can read about changes that just got implemented:
IE Blog - http://blogs.msdn.com/b/ie/
Opera Desktop Team - http://my.opera.com/desktopteam/blog/
Webkit changelogs in human language, by Peter Beverloo - http://peter.sh
Firefox changelog monitor - http://www.squarefree.com/burningedge/
Let's say I outsource the development of an HTML/JS/CSS/AJAX web app targeting ONLY modern browsers. If it matters, assume there are 20 unique templates used in creating the application (to give an idea of the size of this application). My understanding is that much time/money is spent hand tweaking the code to make it consistent among browsers. I'm interested in ways to minimize this expense.
As of June 2011, Google Chrome Frame is advertised to not require administrator privileges for the user to download and install for IE 6-9, which essentially runs Chrome as a plug-in inside IE to avoid browser incompatibility issues with IE (substituting potential compatibility problems with Chrome, which should be much less than IE).
If I were to direct the developers to target only modern browsers minus IE, requiring all IE users to download Chrome Frame instead, would this path translate into any significant development cost/time savings? (My users are engineers and may be willing to accept this tradeoff since this application is not offered elsewhere.) I just don't have a feel for how much effort is made for IE versus other (modern) browsers, and wondered if anyone with experience could comment whether this makes cents (pun intended) or is simply crazy.
Also, any downside to doing this?
You will save time and money. I have done something similar for our in-house application. The site runs only on webkit browsers (chrome and safary).
We save a log of time, because the css and JavaScript can be more efficient, and most importantly, we do not have to test every change on 6 different browsers. This is very liberating.
If your users allow you to exclude IE, i recommend it.
It all depends on your application and developers. With enough knowledge it's possible to write code without even checking in IE until the end but only keeping it in mind and have 99% of things as expected in ie8-9, 80% in ie6-7.
If your users are engineers I can hardly imagine them using ie in the first place and even if so definitely not ie6/7.
Even if you don't go with Chrome-frame, given above points, if you're willing to go with slight to mild visual design degradation you can get away without specifically targeting ie...
Here's a little ie9 promo for ya :)
http://varonasf.com/ie69/
(only works in decent browsers)
This is the design decision behind Google Frame. You always have the choice of either designing for the lowest common denominator, i.e. IE6, and having a limited function site, or designing for a reasonable HTML 5 standard and forcing users to upgrade.
...allowing users to access modern web technologies like HTML5 on
legacy browsers.
http://blog.chromium.org/2010/09/google-chrome-frame-stable-and-speedy.html
I have been testing our mobile site on an android and iphone and feel that I have a good working website for those browsers. The problem is that I just got my hands on a blackberry 5 and the results are pretty appallingly bad. We are using jquery and it takes 20+ seconds for the js to load get itself oriented.
My thought is that we probably are just better off removing or severely curtailing our use of js on a browser like BlackBerry 5 or lower which takes me down the path of browser detection.
I have used modernizr for this project and I'm wondering if there is a particular feature or set of features that we could detect and that would then allow me to divide the browser into groups of Excellent, Good, Medium, and Poor as found in the Quirks Mode Browser listing found below. Alternatively, I would settle for an answer divides it into excellent and everything else.
http://quirksmode.org/mobile/mobilemarket.html
Based on the data presented here.
http://www.w3.org/2010/01/results-wctmb2
It appears that two features of browsers that effectively separate high levels of js support from low levels of js support are support for localStorage and support for canvas.
Every browser at or below 50% fails to support either localStorage or Canvas and every browser above 50% (except for a couple versions of Firefox and Fennec) support both.
Netscape fails to read a lot of jQuery written. What steps do you take to overcome these, and how much of the market do netscape users take up?
Steps I would take:
Let it fail
Wait for Netscape users to notice they are using a long dead browser with security holes in it
The market share for Netscape is as close to zero as makes no matter.
Umm, 0%?
Having said that, I have to admit that jquery fails on a lot of sites while prototype works, in my ancient Konqueror 3.5.10, so maybe there's a pattern here.
Although I grew up on Netscape ;-) ...its no longer maintained (R.I.P)
Thus as much as I'm all for the "support all browsers" mantra - supporting users of a now "dead" technology seems like a tall task.
IIRC, the jQuery support matrix is based on supporting the latest supported major version of a major browser (and 1 level previous). Netscape 7 and 8 are both excluded from this list.
I would suggest a simple "Please Upgrade" notice for the site... and since the users are on Netscape, Firefox would be a very compatible path to upgrade on since the concepts and layout are very similar (e.g. bookmarks, context menu options, etc.)
Thus providing a Download link for Firefox 3 would provide users a smooth guided path to upgrade.
Maybe just a simple iframe with this would work well.