Pop-ups do not work in JQueryMobile 1.3.2 after updating chrome version 43.0.2357.65 m

Question

Does the latest chrome version “43.0.2357.65 m” have broken JQueryMobile 1.3.2 for someone else? When I click the popup, it jumps to the top of the page and the scroll bar disappears. This was good in the previous version.

The problem affects my application, but reproduces on the JQueryMobile demo pages:

• Using Chrome 43.0.2357.65 m go to http://demos.jquerymobile.com/1.3.2/
• Click on popup
• On the pop-up page, click the Login button halfway down.
• It moves to the top of the page and the scroll bar disappears.

Please note that this does not happen every time - if you try again, this may work, but if you start the steps from a fresh tab, it will look consistent.

I raised a problem with Chrome, but just wondering if anyone knows what is happening, and if there is a workaround that I can implement.

Thanks!

Answer 1

The popup menu seems difficult to reproduce - Going to the exact link below and then clicking on the specified login button seems to guarantee the behavior. http://demos.jquerymobile.com/1.3.2/widgets/popup/#&ui-state=dialog

I believe that the solution below may be due to the fact that it fixes other fun problems with the transition of the slides. (limited popup test only) but looks promising

Overriding the violation function using the code snippet below. You must call this before loading jquerymobile js

// Override of $.fn.animationComplete muse be called before initialise jquery mobile js $(document).bind('mobileinit', function() { $.fn.animationComplete = function(callback) { if ($.support.cssTransitions) { var superfy= "WebKitTransitionEvent" in window ? "webkitAnimationEnd" : "animationend"; return $(this).one(superfy, callback); } else { setTimeout(callback, 0); return $(this); } }; }) 

Background: jqueryMobile 1.3.2 does not properly bind the jquery one () handler.

.one () - "Attach a handler to an event for elements. A handler is executed no more than once for each element for an event type. ": http://api.jquery.com/category/events/ : essentially the event fires, and then deleted.

However, calling ("webkitAnimationEnd and animations") using one () potentially means that only one (depending on the browser) of the two handlers, the others are too late and can cause a memory leak.

Chrome43 handles both webkitAniationEnd and animation — however, only one at any given time. This causes the other to linger and fire the next time the element is animated.

Answer 2

As a workaround for me, it works if you use the jQueryMobile API.

 $('selector').popup('open'); 

instead of relying on jQueryMobile markup

My version of Chrome is “43.0.2357.81 m,” and I also experience this.