Opera JS Troubleshooting

I recently received a comment that said my sprites were breaking in Opera and Safari 2. I don’t have a mac, so I can’t test Safari 2, only 3. Safari 3 works fine. I checked my Google Analytics to see how many people used Opera and it turns out to be around 3%. So I fired up my Microsoft Virtual PC and installed Opera, right next to IE6 and Safari. All the browsers, I really don’t want to support. Booooooo!

Ok, so the problem wasn’t my technique, nor jQuery. To make my life easier for the demos, I used an array to set all of the sames of all of the icons. I used a function called indexOf to get the position in the array and match it to the class. This is all a fancy way of making the class of the link define what kind of image shows up.

Turns out Opera doesn’t support using indexOf in this way. I found a fancy solution to extend indexOf on Opera. But this is ugly ugly ugly. Why does Opera have to be different? Why does Opera have to exist? Who uses Opera as their main browser? Seriously, are there people who say, “Firefox? yuck; IE7? boo; Safari? no way!” It makes no sense to me. Then again, I am a developer who has to deal with the mess underneath. I suppose if we all drove one kind of car, then maintenance would be easier.

I suggested to the jQuery list to put that extension (copied below) into the core. Why not fix Opera and avoid these issues in the future?

// This is solely to support indexOf in Opera.  Not sure of a better way to do this
if (!Array.prototype.indexOf) {
 Array.prototype.indexOf = function(val, fromIndex) {
 	if (typeof(fromIndex) != 'number') fromIndex = 0;
 	for (var index = fromIndex,len = this.length; index < len; index++)
 		if (this[index] == val) return index;
 	return -1;
 }
}

To make this code box, I used Dean Lee’s Source Code Highlighter Plugin for WordPress. Uses this GeSHi thing too.

10 Replies to “Opera JS Troubleshooting”

  1. I don’t think .indexOf is intended to find elements in array (although it does it pretty well in Firefox and Safari). I think I’ve discovered that when the ‘feature’ didn’t work in IE7. BTW, your solution is much more elegant than mine – I just wrote findInArray function. It didn’t occur to me that I could just use prototype. πŸ™‚

  2. Hi Glen, Chris Mills here from Opera – Rudi is right when he says that .indexOf wasn’t really intended to be used this way. We implement it exactly how it is supposed to be done in accordance with the original spec – Firefox/Safari extended the original spec.

    My colleague Mark WJ explains the whole situation pretty well in the 2nd link you list in the post, but if you ever want any help with Opera standards support, or if you’d like to report more findings, feel free to contact us (my e-mail is cmills [at] opera [dot] com) – we’d love ot hear from you.

    all the best,

    Chris Mills
    Opera Software ASA

  3. Chris, Thanks for the input. I’m sorry if I was overly harsh. Browser debugging puts me in a bearish mood. πŸ™‚

    I definitely understand the spec argument, but as a minority browser, I would think that sometimes you need to support the “de-facto” standards that IE or FF set. Even if they contradict or expand on the spec.

    I have the exact same problem with Firefox not supporting background-position-y as an independent CSS rule. They are correct as far as the spec goes, but it’s a no-brainer to include it.

    Anyway, thanks again. I will keep you in mind.

  4. “sometimes you need to support the β€œde-facto” standards that IE or FF set”

    Indeed. Pretty often too. We do a lot of hard work on supporting the “de facto” stuff!

    But the real problem with it being “de facto” instead of clearly specified is that we don’t KNOW about it. Until I saw your post I actually had no idea that Firefox had added a method known as Array.prototype.indexOf to their ECMAScript engine!

    And that’s exactly the problem with non-standard stuff: we don’t KNOW about it until we are proven incompatible because something is broken or somebody is annoyed at us. πŸ™

  5. @Hallvord: Hmm, WordPress held your comment in the Akismet spam folder. I wonder what that is about. Lucky I didn’t just delete the whole bunch.

    I see your point about the knowledge transfer. It’s really a wild-west situation out there. And it’s only getting worse. Competition is good for innovation but terrible for standards and stability.

    The pendulum swung towards stability with IE6, when it had 95% market share. Lot’s of great things were created during that time and development was easier.

    Now the pendulum is back the other way and it’s insane to be a developer again. I feel your pain.

    Opera looks like a fine browser, but I really question the overall wisdom of having to test in so many clients.

    I wish there was a way to embed WHICH rendering client you want to use in the page itself. SO I could say, “I like how opera makes developing this page easy, and its fast so render the page with opera”. That way the PUBLISHER could determine which browser to render in and the specific browser became meaningless.

    Opera could make a big splash with that. Have IE7 and FF and Webkit rendering engines available to the page. Use a meta tag to say which to render with. I would absolutely ABSOLUTELY download and start using it if it did. It would be a wonderful testing tool, if nothing else. I could see the page in different rendering engines without Virtual PC.

    I am going to blog about this, begging Opera to do it.

  6. Hi Glen, thanks for rescuing my comment from the spam folder – perhaps I used too many capital letters for Akismet?

    In any case, the whole idea of standards is to simplify development. So the theory is that if you as a web developer AND we as browser developers stick to the specified and published standards, development will be smoother and more stable for all of us, with less gotchas caused by incompatibilities and under-specified implementations.

    We know browsers aren’t always perfect and bug-free in their standards support, but.. I think your post here proves that the “stick to standards, have less problems” idea still has its merits. Because you didn’t stick to the standardised stuff (meaning the methods and properties specified by ECMA-262 for the JS Array object) you ran into problems when you realised Safari 2 and Opera and who knows what other browsers or versions (IE5? Firefox 1.5? IE on Mac? NetFront on iMode mobile phones?) didn’t support the non-standard method you used.

    So really, I think this post is a great compliment to Opera, because we’ve always been going on about the importance of standards for interoperability, and you prove we have a good point, no? πŸ™‚

  7. Wow, I’m working with the latest jQuery (1.2.3) and I was having issues with a plugin in Safari 2 on the Mac. Turns out Safari 2 has the same issue. Adding this script to extend the jQuery prototype fixed everything. Thanks so much.

  8. Let me put my hand up as an Opera user and also as someone that blocks all references to Google Analytics. Take that as you may.

    And yes, compared to Opera those other browsers do suck in varying degrees.

Leave a Reply