Warning: this is a short-term solution, it may cause interesting results in future versions of the webOS SDK, so use wisely.

One minor frustration I’ve run into with making JavaScript webOS apps (games in particular) is the mousemove events don’t seem to fire very often on custom controls. This is particularly noticeable when users finger-paint on canvas tags or drag elements around. I suspect that this quirk in the webOS webkit was introduced as a performance improvement, but running up against it can be painful.

A fix I’ve discovered is this simple CSS addition to any elements which need higher resolution mouse movement (er, touch movement, whichever):

myelement {
    -webkit-user-drag: element;
}

Just put any valid CSS selector in place of “myelement” above, and you should notice a marked improvement in mouse movement precision for the element(s) in question.

This is not a future-proof solution, because if Palm’s webkit properly supports this CSS property in the future, your users will be dragging a shadowed version of the control around in ways you probably don’t want. Please be sure and test this with new SDK versions and be ready to take it out of your app at some point.

Advertisements