jQuery Forum

I have two PhoneGap apps that work across a number of platforms but now fail on Android 5. They use jQuery and jQuery Mobile. A similar bug was reported on StackOverflow (http://stackoverflow.com/questions/29754737/canvas-shown-black-randomly-on-android-5/) and the author there is also using jQuery Mobile.

Both of my apps make extensive use of the HTML5 canvas but the canvas element often appears entirely black in Android 5. Transitioning to another page usually fixes this, but updates are also often not complete. In looking at the logcat, both I and the SO author (link above) are seeing render warnings. My code is doing nothing more than drawing on the canvas, so I am assuming (perhaps incorrectly) that jQuery Mobile is implicated - particularly since PhoneGap doesn't do anything in this case other than bundle my HTML & JavaScript code with the native WebView. Also, the apps worked fine in Android 4.4 so it isn't just the change of WebView that is the probem (4.4 was the first version with the new Chromium WebView). A portion of my logcat output is below. Any suggestions about fixes for this or where I might re-post this problem?

E/chromium(13492): [ERROR:gles2_cmd_decoder.cc(10748)] [.Parent-Compositor-0xb50fe510]GL ERROR :GL_INVALID_OPERATION : glConsumeTextureCHROMIUM: invalid mailbox name

E/chromium(13492): [ERROR:gles2_cmd_decoder.cc(6309)] [.Parent-Compositor-0xb50fe510]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'

I/art     (  819): Explicit concurrent mark sweep GC freed 18772(846KB) AllocSpace objects, 1(16KB) LOS objects, 26% free, 44MB/60MB, paused 1.486ms total 108.916ms

E/chromium(13492): [ERROR:gles2_cmd_decoder.cc(6309)] [.Parent-Compositor-0xb50fe510]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'

E/chromium(13492): [ERROR:gles2_cmd_decoder.cc(6309)] [.Parent-Compositor-0xb50fe510]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'

buttonMarkup is marked as deprecated from version 1.4 (discussed elsewhere), but the documented equivalent using button("option", ...) does not appear to work.

I have four colour buttons and want to move the check mark to the one that's just been clicked (a little odd, but it works fine for users). The following code works:

1.             for (var _i = 0; 4 > _i; _i += 1) {
                   if (baseColour === _i) {
                       $(COLOUR_BUTTON_IDS[_i]).buttonMarkup({ icon: 'check', iconpos: 'left' });
                   } else {
                       $(COLOUR_BUTTON_IDS[_i]).buttonMarkup({ icon: 'none', iconpos: 'none' });
                   }
               }

But using button("option"... for the same purpose does not:

1.             for (var _i = 0; 4 > _i; _i += 1) {
                   if (baseColour === _i) {
                       $(COLOUR_BUTTON_IDS[_i]).button("option", "icon", "check");
                       $(COLOUR_BUTTON_IDS[_i]).button("option", "iconpos", "left");
                   } else {
                       $(COLOUR_BUTTON_IDS[_i]).button("option", "icon", "none");
                       $(COLOUR_BUTTON_IDS[_i]).button("option", "iconpos", "none");
                   }
               }
   

The former does what I want and expect; the check mark shuffles along to the button just pressed. In the latter example precisely nothing happens,

I have tried adding a button("refresh") at the bottom of the loop (for each button) but this has no effect. So unless I have overlooked something - and I am happy to be told I have - I wouldn't start avoiding buttonMarkup just yet.

I am using jqm 1.4.2 and jq 2.1. Have test with latest versions of Mozilla and Chrome on Windows 8.1.

I have two dialogs in a fairly simple PhoneGap app. Both are displayed programmatically in a script using popup('open'). One works fine, the other requires that a button is pressed twice - or at least the user must press in the dialog somewhere and then press the button. Both dialogs are below:

1. <div data-role="popup" id="popupShareDlg" data-overlay-theme="a" data-theme="a" style="max-width:250px;" class="ui-corner-all">
       <div data-role="header" data-theme="a" class="ui-corner-top">
         <h1>Share</h1></div>
           <div role="main" class="ui-content">
               <h3 class="ui-title">You may need to scroll the list of sharing apps</h3>
               <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-b" data-rel="back" onClick="sharingApp.remindNo();">Got It</a>
               <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-b" data-rel="back" data-transition="fade">Remind Me Next Time</a>
           </div>
       </div>
2. <div data-role="popup" id="popupEraseDlg" data-overlay-theme="a" style="max-width:280px;">
       <div data-role="header" data-theme="a">
           <h1>Erase Page?</h1></div>
             <div role="main" class="ui-content">
               <h3 class="ui-title">Are you sure you want to erase this page?</h3>
           <p>This action cannot be undone.</p>
               <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
               <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" onClick="drawingApp.clear();">Erase</a>
           </div>
       </div>

It's the popupEraseDlg that has the odd behaviour. The sharp-eyed may notice that it is 90% the same as the jQuery Mobile popup dialog demo for deleting a page. I have tried forcing the focus by binding to the popupafteropen event and calling focus() but with no apparent improvement. I am using release 1.4.1.

The header lines are below (everything is local since the js files are part of the app):

1. <script src="js/jquery.js"></script>
   <link href="css/themes/default/jquery.mobile-1.4.1.min.css" rel="stylesheet" />
   <script src="js/jquery.mobile-1.4.1.min.js"></script>