jQuery .show() and BlackBerry OS5

Question

This is probably a long shot, but...

Anyone run into a problem using jQuery's show() in a BlackBerry OS5 web browser and causing it to either not work (on the device) or crash the phone (simulator)? If sound, found a workaround?

The same thing happens whether we use .show() or .css('display','block')

Works in OS6, iOS, Firefox, Chrome, etc, etc...but dies in the OS5 browser.

Oh, I should add:

From what we can tell, this is only an issue when running our application of our actual servers (JSF, websphere). When we test the jQuery locally as a static page, it works fine.

Answer 1

My team at work is also using jQuery Mobile and encountered similar problems on devices (though I don't think we've seen a simulator crash from this). Here's what we've found so far:

• Your call to show() may be working, but be processed so slowly that you give up before it loads. The entire DOM for the web page is processed every time you add, remove, or modify any attribute or element on the page. A BlackBerry Forums post suggests removing an element before modifying it to increase performance.

• On some devices we've found that a call to show() will work, but the UI is only updated after scrolling up or down on the page a bit. If your page is too short to scroll, you might be out of luck.

• The onclick attribute appears to be ignored on touch screens (but works fine on trackball/touchpad devices), and may be why your show() call results in no action. To make our hyperlinks work on all devices, we place JavaScript calls in both the onclick and href attributes:
  <a href="javascript:showThings();" onclick="javascript:showThings();">Show</a>

• When invoking JavaScript from an onclick method, we've had to prepend the method call with javascript: like so:
  <a href="#" onclick="javascript:showThings();">Show</a>
  (Most modern browsers assume that your onclick value should be evaluated as JavaScript)

• Focus-based navigation is not enabled by default, which caused us problems when using trackball/thumbpad devices (the screen would lock up and stop responding to key presses). You can enable focus-based navigation in either your project's config.xml or by using a RIM-specific hyperlink attribute. I forget what issue we encountered after enabling this in config.xml, but we ended up going with the x-blackberry-initialFocus hyperlink attribute instead.

It's hard to say exactly which of the above points might apply to your situation, hopefully something is relevant or useful. My team has been unimpressed so far with the web development experience on BlackBerry, particularly the differences seen between OS 5 and 6, and between trackball/thumbpad and touch devices.

Answer 2

The issue we found is that OS5's browser just has issues updating the DOM when changing display properties from BLOCK to NONE. A BlackBerry rep has even told us that one should just avoid updating the DOM in OS5 (ugh!).

So, the solution we ended up going with was to not use .show() and .hide() but rather we toggled a class name. Every device except OS5 would have the class name toggle the display property, OS5, however, would toggle the height from auto to 0px

This made OS5 happy.

All that said, that still doesn't explain some of the variables...such as that we could run the code locally as a static page and run it in the simulator just fine. But the exact same code would crash if we tried loading the page off of our server.

We can also use .show() elsewhere in the app without a problem.

In the end, I believe it's some particular combination of CSS applied to parent elements that kills the browser if some of its child elements are having their display toggled.