making bbPress (and WordPress) work better!

Posts tagged “firefox

How to fix “mutation operation” errors in Firefox

You may find at some point using firefox you are unable to access some websites which rely on complex javascript libraries. When you look at the errors on the page, you see:

A mutation operation was attempted on a database that did not allow mutations

The solution is to make sure dom.indexedDB.enabled is set to true in about:config

One example of a website with this problem is which will not display anything on the page unless this setting is enabled. Developers should wrap such function calls in try/catch or other error handling so your entire website doesn’t fail. Browser sniffing is not adequate.

Firefox Page Timer Lite (shows page load time)

One of the features I really liked in FasterFox plugin was the simple page timer which sat in the statusbar and just showed you how long the page you were viewing took to be loaded.

However they stopped updating that extension and it made my Firefox unstable. There is a FasterFoxLite but it also causes my Firefox to crash sooner or later for some reason.

So after some mucking about, I was able to make a super light version of the same page timer for Firefox.

Download Page Timer Lite for Firefox (pagetimerlite.xpi)

It works in all versions of Firefox, even 15 beta which I am using now, but you MUST install status-4-ever extension first, because my plugin requires the statusbar which was removed in Firefox 4 and newer.

This is because I do not know how to make addon bar extensions yet, someone will have to show me or I’ll eventually find a simple example for converting statusbar to addon bar.

SPDY indicator for Firefox 11+

Firefox 11 will be supporting the SPDY protocol for faster webpages. (Firefox 11 beta seems quite stable and I have been using it for a month now.)

Unfortunately there is no clue to when SPDY is actually working in Firefox because the only way to know is to examine the response headers for X-Firefox-Spdy.

However Cheng Sun has come to our rescue by whipping up a SPDY indicator extension inspired by a similar plugin for Chrome that shows an icon in the address bar.

SPDY is not on by default in Firefox 11, you have to go into about:config and change network.http.spdy.enabled to true.

Then watch for green lightning bolt the extension adds to the url address bar by visiting most google services or now Twitter.

Now available on! Here is a proper XPI version of the extension

Here are some SPDY enabled sites to test it on

Firefox 10 hits Release Candidate 1

Go test your websites to make sure nothing has changed, but it shouldn’t have.

I had dreaded the fast ship schedule put in place by Mozilla but once you start realizing their new version numbers are just minor version numbers in disguise, it’s not so bad. So Firefox 10 is really Firefox 5.10

What’s not really that new in Firefox 10
(hint: it’s mostly CSS3 stuff)

Firefox Mobile looks like it’s shaping up though.

How to get an element’s TRUE position in javascript, including borders in Firefox

I’ve seen a bunch of scripts around the web to get an element’s (aka object) actual/absolute position on a page in javascript. Virtually all of them are wrong, for one very good reason – if you have borders on an element in ANY version of firefox, the position will be off by the border width.

I haven’t seen any script attempt to deal with borders.

This is because Firefox uses a broken “inner” model, regardless if you are in standards vs quirks mode, that was based on trying to mimic IE6 – the only other game in town when Firefox was evolved. But ironically, even IE has moved on to including borders since version 7/8 while Firefox remains the same from version 1 through 5. Good for backwards compatibility I guess but a headache for web developers.

So in plain English, in Firefox, margins count towards offsetLeft/offsetTop but NOT borders! It’s the only “html5” browser in existence right now that doesn’t include borders.

See these bug reports from SEVEN years ago, still unfixed:

Ignore where people claim their solution works – if it doesn’t include border calculations, it doesn’t work, they are misguided.

I used to have a very short and sweet function to grab an object’s true position on the page. (do not use this one)

function XY(o) {var z=o,x=z.offsetLeft||0,y=z.offsetTop||0; while(z=z.offsetParent) {x+=z.offsetLeft||0; y+=z.offsetTop||0;} return {x:o.X=x,y:o.Y=y};}

(it returns an object with .X .Y added (left and top) but also appends them to the original object for convenience)

However do not use the above script, it’s incomplete. Not only does it not properly deal with scrolled objects (div, iframe, etc.) it does not handle borders in firefox.

Sadly there is no fast & clean way to get border width in firefox, you have to use computedstyles from the best I can figure out, which must be relatively slow because of how it traverses stylesheets (if you know a faster way, please let me know).

So this (unfortunately larger) function I’ve come up with does finally produce identical results across Chrome, Firefox and IE8

function XY(o) {
var z=o, x=0,y=0, c; 
while(z && !isNaN(z.offsetLeft) && !isNaN(z.offsetTop)) {        
c = isNaN(window.globalStorage)?0:window.getComputedStyle(z,null); 
x += z.offsetLeft-z.scrollLeft+(c?parseInt(c.getPropertyValue('border-left-width'),10):0);
y += z.offsetTop-z.scrollTop+(c?parseInt(c.getPropertyValue('border-top-width'),10):0);
z = z.offsetParent;
return {x:o.X=x,y:o.Y=y};

But even though it’s larger, it’s still far better than turning to an 80k library like jquery. Note my use of “window.globalStorage” which is a trustworthy way of detecting anything based on the real gecko engine (since FF 2+) while ignoring all other browsers. No user-agent sniffing needed. Can’t use the navigator property – it’s useless because Chrome will also return “Gecko”.

Firefox 3.5 finally supports DEFER on javascript

I was pleased to discover that after a mere 9 years
that Mozilla/Firefox finally supports defer on javascript.

Yup, 9 years, I couldn’t believe the time either, see for yourself:

What this means is that Firefox finally has a feature
that Internet Explorer has had since version 4 (1997)
(it was made a standard by W3C HTML 4.01 in December 1999)

This means you should be doing this now on all your javascript, inline and external loading:
<script defer="defer" type="text/javascript" ...
(the repeat of the word is simply because of modern validation standards, without it the validation nutters have conniptions)

This causes the script to delay executing until the page is loaded. In some cases the script is also delayed in loading. The short answer is it will make your page seem to load faster for your visitors.

The only time you can’t use DEFER is when you are relying on javascript to inject something inline in your page, ie.
<script defer="defer" type="text/javascript" >
will NOT show “hello world” but rather “world hello“.
(if you removed the DEFER it would show “hello world” as expected)

I still don’t know what the status of webkit/safari/chrome is on DEFER or Opera for that matter, much more googling required.

best firefox plugin ever – install it now, seriously

I’ve been using this plugin for a couple years now and it’s saved my arse at least half a dozen times when Firefox corrupts one user file or another for some reason:

It’s called “Bookmark Backup” but it does SO much more.
If you open the options you can tell it to also save your history and more importantly your password files among many other files.