Improve multi-touch experience on Android browsers

Question

I need to implement a pinch to zoom and drag to pan the SVG. This SVG is displayed at 480 * 480 pixels, but its actual size is 1920 * 1920 pixels.

I went with HammerJS and listened to pinch and drag :

 $(document).hammer().on('pinch', $.throttle(30, setZoom)). on('drag', $.throttle(30, moveTo)); 

Inside these methods ( setZoom , moveTo ) I already prevent the default action for the event, as proposed by the creator of Hammer

 ev.gesture.preventDefault() 

As you can see, I process the handlers using jQuery.throttle .

My zoom and pan implementation works by modifying the viewbox SVG attribute. To show the whole image, I set the viewbox="0 0 1920 1920" attribute, and to show the specific, I set it to viewbox="100 100 1720 1720" . (To manipulate SVG, I use svg.js )

Finally, SVG has this structure:

• Single image (1920 * 1920 pixels),
• 20 rows within a group representing a grid,
• More or less than 50 groups, each of which contains ellipse and text > tspan .

This is part of the SVG code:

 <image id="SvgjsImage1027" xlink:href="/exams/still_picture/exam-4" width="1920" height="1920" x="0" y="0"></image> <g id="SvgjsG1002" class="grid"> <line id="SvgjsLine1003" x1="0" y1="0" x2="1920" y2="0"></line> … </g> <g id="SvgjsG1026" class="points"> <g id="s10621674-24" class="threshold"> <ellipse id="SvgjsEllipse1029" rx="7" ry="7" cx="1062" cy="1674" fill="#2b96d9"></ellipse> <text id="SvgjsText1030" style="font-size:40;font-family:Helvetica, Arial, sans-serif;text-anchor:middle;textLength:1;" font-size="40" text-anchor="middle" x="1067.6568542494924" y="1690.5354797464468"> <tspan id="SvgjsTspan1031" dy="36.93333336" x="1067.6568542494924" style="font-size:40;font-family:Helvetica, Arial, sans-serif;text-anchor:middle;textLength:1;">24</tspan> </text> </g> … </g> 

Question

Android performance is pretty bad. We tried Chrome 26 ( Chrome 26.0.1410.58 ) and Chrome Beta 27 ( Chrome 27.0.1453.74 ) on the Samsung Galaxy Tab 2 tab, but that seems sluggish. We tried to open the same page on the iPad 2 (Safari on iOS 6), and it works correctly, at a speed comparable to the native application.

What can we try to improve Android performance? We cannot switch to another browser (say, on Firefox Mobile), so the solution should be in an HTML / Javascript environment.

---

We also tried using some pinch libraries to scale and drag to pan (for example, jQuery.panzoom ), but we had better results.

Answer 1

We gave up trying to get this to work well as a web application.

We tried to use HTML instead of SVG, but we did not see a big performance improvement - it makes me think that multitouch event processing in Javascript is slow (on Android).

Since we planned to distribute our own Android application covering our web application, we decided to handle the scaling and panning using our own application.

In principle, when the zoom and pan function is required, the web application sends some messages through the web socket that are intercepted by the native application. At this point, it displays another web view on top of another, which is downloaded only using SVG (our web application creates and processes SVG, serializes it and sends it to the native application via a web socket). Because of this, the zoom and pan performance is really good because it is handled by the web view. The end user does not notice what is happening behind the scenes.