Concerns About Opera Rendering Webkit Properties

In February, Opera announced they were planning on rendering some Webkit prefixed properties in their Opera browser. Yesterday, they released further details on this, along with an experimental build of Opera Mobile Emulator that renders Webkit prefixed properties.

If you'd like to know why they are doing this and how it will affect you as a developer, I encourage you to take a look at Opera Mobile Emulator build with experimental WebKit prefix support.

When Opera first made this announcement, I wrote Vendor Prefixing: Standing Up for Developers, where I explained that it wasn't just developers who should be taking the blame for vendor prefixes not being implemented properly. I also mentioned that I've had a lot of difficulties with my personal project Sequence.js, due to an Opera bug.

I've been awaiting Opera's post regarding exactly which Webkit prefixed properties they would render and as I anticipated, my personal project no longer works due to these changes. What's more, they may cause issues for other websites too.

In this post, I will address concerns I have regarding this move and provide code examples that I believe could prove to cause trouble for Opera in the long run.

Issue 1 - jQuery Doesn't Bind transitionEnd Events

Sequence.js, is a CSS3 transition based slider. It relies on transitionEnd events to be able to time the changing of slides within a slideshow.

In Opera Mobile Emulator Experimental, if you're using jQuery to bind events to transitionEnd, those events, whether prefixed or non-prefixed, will no longer work:

$(document).bind("webkitTransitionEnd oTransitionEnd", function(){
    alert("transition ended");
});

See a demo here: JSFiddle: transitionEnd Issue

I also tested binding these events in standalone JavaScript which does work, so clearly this is an issue with jQuery. I am unfamiliar with the jQuery source, so hopefully others can expand on why this is happening (or not happening as the case may be). Whilst not technically a fault with the Opera browser, existing applications that rely on these jQuery events may no longer work.

Update: You can find the JS binding test here.

Update 12th May 2012: Having looked into this a little further, it appears the Experimental Opera Mobile Emulator is converting transition events to lowercase. So, oTransitionEnd becomes otransitionend. A workaround is to bind the lowercase version in jQuery, demonstrated here.

Issue 2 - Modernizr Returns the Webkit Prefixed Property in Opera

Modernizr is used to query the features of a browser, allowing a developer to write fallbacks in the case of a browser not supporting a particular feature.

alert(Modernizr.prefixed('transition'));​

See a demo here: JSFiddle: Modernizr Prefixed Issue

The above code in a Webkit browser, returns "WebkitTransition". Now that the experimental Opera supports Webkit transitions, this query returns "WebkitTransition" too. Is this a problem? Yes.

As Opera mention in their post, when using prefixed properties in CSS they've chosen to respect the cascade, allowing a developer to place the property they want Opera to rely on below others in the rule set. If you want the Opera prefix to take precedence, place it after the Webkit prefix and vice versa. With Modernizr.prefixed(), you don't have that choice. You just get "WebkitTransition". You may want to treat Opera differently to a Webkit browser based on this result, but you no longer get the choice. Issue 3 supports this.

Again, this isn't directly an issue with Opera but it does effect existing tools and may cause more issues for developers...even the responsible ones.

Issue 3 - Opera Doesn't Return the Transition Duration Via JavaScript

This issue doesn't just exist in the experimental Opera Mobile but it's previous versions and the upcoming Opera 12, and is only made worse in the experimental version.

transDuration = $("#menu").css("-o-transition-duration");

See a demo here: JSFiddle: Transition Duration Returns an Empty Value

Opera Bug Report

When getting the transition duration of an element via jQuery or JavaScript, an empty value is returned.

This isn't a result of Opera rendering Webkit properties but it does mean that the issue can no longer be avoided via querying the browsers features and serving a workaround, as mentioned in issue 2.

Promoting Laziness and Punishing the Responsible

I call myself a responsible developer. When developing Sequence.js, I consider all browsers and although it uses cutting edge technology, I make sure it works in older browsers too. When I came across issue 3 in Opera, I spent two days working out what the issue was and writing a workaround for it because I wanted to support Opera. I am certainly going to have to spend more time working on the project to get it working in future versions of Opera too, should this experimental approach become reality.

I'd like to point out that I have nothing against Opera but do I agree with this move? It's difficult to say. I understand that they want to fix the issues created by lazy developers but at the same time, it seems that laziness is being further promoted.

Tweets such as:

I don't include the -o- prefix because I don't test in Opera because it accounts for 0.3% of our visitors. Not because I'm lazy or inept."

And:

I totally see why Opera is doing this. I'm bad at using the -o prefix, if they have parity with webkit then go for it.

Show that some developers are, to be frank, stupid, and in the case of the latter, encouraged to be stupid. If you can type -webkit-, then you can type -o-. How can you be "bad" at that? Does taking a couple of seconds to write an extra line (or run your whole stylesheet through Prefixr) equate to the trouble your visitors may face because you didn't include an extra prefix? Even if you're not going to test in Opera, by not including the -o- prefix, your site will be more broken that what it is if you do include it but not test.

With the issues I've mentioned above, it seems like it's not just laziness that is being encouraged but the responsible are being punished at the same time.

This isn't about developers though. It's supposed to be about the users. Bridging the gap so users don't have to suffer. This I completely agree with, although the way in which Opera have approached it, I'm not so sure about.

They explain that they took the top 10,000 sites and analysed what -webkit- prefixed properties were used without fallback, then acted based on those findings. I think this should be reconsidered. Does Opera (or any browser for that matter) really need to support transitions? Do they benefit the user or subtract from an experience should they not be implemented?

Let's not contradict the purpose of making this difficult move. This shouldn't be about keeping up with the competition. I'd like to see Opera provide cases where a site is broken because an -o- prefix or the official property has been omitted, justifying the need to support the -webkit- one.

Opera, you're being closely watched by other browsers that may want to make this move too, let's get it right from the beginning.