CloudMade/Leaflet — Issue #383: Blackberry OS 7 webkit translate3d function is broken
Author: pagameba
Created: 2011-11-30 15:57:46+00:00
State: open

There is a horrible rendering bug in Blackberry OS 7 webkit implementation of translate3d which manifests itself as a z-index / peekaboo type issues. Unfortunately the browser advertises 3d transformation. Using stock Leaflet in a web app or an embedded web view reveals this problem. This was tested on several simulators running version OS 7 up to 7.0.0.318. I had reports of it actually working on real devices running OS 7 so it might have been fixed.

window.navigator.appVersion reports this string in the simulator I am currently testing:

5.0 (BlackBerry; U; BlackBerry 9850; en-GB) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0.261 Mobile Safari/534.11+

To get this to work on the OS 7 simulators that I have access to, I had to hard-code L.Browser.webkit3d to false and override the css for .leaflet-tile-pane to use translate instead of translate3d.

I'm not sure what the right work-around would be but I think that the L.Browser code could be modified to check for window.navigator.appVersion containing Blackberry and Version/7 and return false for webkit3d. I will try some other versions and see if I can identify the version it got fixed in.

Also, and perhaps this is more of a generic problem, there should also be a way to override the .leaflet-tile-pane hardcoded CSS in the case that webkit3d is not supported. Perhaps the code that creates the tile pane should check this property and set a style of translate(0,0) to override.

If you are interested in incorporating this, I can produce a Pull Request. For now I just have a hacked up copy of the dist library :)