add support for Opera transitions

[chrisben]

While checking the JQM doc pages ('1.1.0' or 'test') on Opera 12 I found that navigating to another page shows an empty page (then a click on the browser back button shows another empty page). If the destination page is reloaded though it shows the page correctly.

When the first page loads, the "Scripts" developer panel shows a :

 Unhandled DOMException: SYNTAX_ERR

in jquery code with this call stack (sorry minified code there):

m jquery-1.7.1.min.js:3
a.find jquery.mobile-1.1.0.min.js:25
find jquery-1.7.1.min.js:3
a.mobile.focusPage jquery.mobile-1.1.0.min.js:51
jquery.mobile-1.1.0.min.js:40
jquery.mobile-1.1.0.min.js:41
f jquery.mobile-1.1.0.min.js:42
a.mobile.changePage jquery.mobile-1.1.0.min.js:63
initializePage jquery.mobile-1.1.0.min.js:175
jquery.mobile-1.1.0.min.js:176
f.Callbacks jquery-1.7.1.min.js:2
fireWith jquery-1.7.1.min.js:2
ready jquery-1.7.1.min.js:2
B jquery-1.7.1.min.js:2

Maybe this is not related to the above navigation problem by the way..

Not sure if that's a jquery problem, a JQM one or Opera..

Tested using Opera 12.00 Build 1467 for Linux (Opera Turbo Off and On : same problem).

Update: Problem not reproduced in opera 12 mobile on Android ICS.

[jaspermdegroot]

I can confirm this issue.
On Windows I tested Opera 11.x: no problems
Updated to Opera 12: JQM sites (not only docs, but any) show a blank page after Ajax navigation

The console shows an error in jQuery:

Unhandled DOMException: SYNTAX_ERR

jQuery 1.7.1 line 5071 / 1.7.2 line 5163

return makeArray( context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );

Besides Dragonfly shows hundreds of "unknown property" errors in CSS

[soncemvo]

Confirmed. Same issue on opera 12

[sehe]

Confirmed. Same issue, opera build 1467 upgrade. Sites like chat.stackoverflow.com don't render at all. Same exception Unhandled DOMException: SYNTAX_ERR

[miketaylr]

OK, that took a little bit to wrap my head around due to a Dragonfly setting (Settings > Scripts > Show Parse Errors and Break on Exceptions, trying to get that to default to off, but that's another story).

The actual issue seems to be two-fold: lack of -o- keyframes and other animation properties (which we added support for in 12), and a mismatch between the OAnimationEnd event type being oanimationend. :/// The better news is we're unprefixing these properties right now internally, so this issue will be a non-issue soon (which means the workaround code could be removed in a release or two).

Let me quote from internal discussion for more context:

Happened in c-i-274, yes. http://jquerymobile.com/test/js/jquery.mobile.js contains this code:

$.fn.animationComplete = function( callback ) {
if( $.support.cssTransitions ) { return $( this ).one( 'webkitAnimationEnd animationend', callback ); }
else{ (...) }
};

which has no support for Opera (the required keyframes and such with o prefix are also missing in http://jquerymobile.com/test/css/themes/default/jquery.mobile.css), and adding OAnimationEnd doesn't help either. This is due to the OAnimationEnd event type being oanimationend (all lower-case), causing a mismatch when jQuery tries to dispatch the oanimationend event instead of OAnimationEnd. In Chrome, the webkitAnimationEnd event's type is webkitAnimationEnd.

This can be worked around by changing the above code to

$.fn.animationComplete = function( callback ) {
if( $.support.cssTransitions ) { return $( this ).one( 'webkitAnimationEnd OAnimationEnd oanimationend animationend', callback ); }
else{ (...) } }
};

and adding some useful o keyframes and animations to the mentioned CSS file.

I've just confirmed locally that this does in fact fix the page-goes-blank problem. Thanks for the heads up and sorry for the confusion.

[jaspermdegroot]

For reference: #1883

[sergeyi]

Are there any fixes planned?
Temporarily solution is to set $.support.cssTransitions = false;

[jaspermdegroot]

Update: changed the topic of the issue

[jaspermdegroot]

The event type has been changed from OAnimationEnd to oanimationend.

[jaspermdegroot]

Transitions doesn't work yet on Opera because it doesn't support 3D transforms. Let's reopen when this is supported.

[miketaylr]

So you need to have 3d transforms to get any transition? Weird.