Introduction

For general websites rather than for mapping apps

We can no longer overlook an issue about performance of transformation in panning & zooming. The scope of panning & zooming features extends to viewing general websites beyond mapping web apps. Because the panning & zooming features are primitive and essential for modern browsers especially in mobile.

References:

http://www.bing.com/maps/

http://www.w3.org/Graphics/SVG/

Results of study

Requirements

R1: Smooth start of panning & zooming
R2: Smooth transition during panning & zooming
R3: Crisp view after finishing panning & zooming

Facts

We examined the performance of transformation in panning & zooming with "3d transform" such as "transform: translate3d ..." and "transform: scale3d ..." on actual browsers.

TEST SUITE

<Panning>

Firefox and Chrome is almost OK except for taking time to start panning (test #2).

<Zooming>

	Tests	Firefox 31.0	Remarks	Chrome 36.0	Remarks
F1	test #21	It takes a little bit time to start zooming.	"will-change"'s matter.	It takes a little bit time to start zooming.	"will-change"'s matter.
F2	test #21	Firefox does not sometimes displays contents smoothly.	Because Firefox sometimes re-renders contents during zooming, in spite of trying to transform the GPU layer.	Good.	Because Chrome does not re-renders contents during zooming using transform the GPU layer.
F3	test #21c	Good.	Because Firefox automatically re-renders contents based on heuristics independently of the end of zooming.	Chrome does not re-render contents with crisp view.	Because it seems that Chrome re-renders contents according to the original bitmap size (based on its user coordinate space) in CPU space, even when the transformation in GPU space is performed.

Possible Solutions

R1 would be satisfied with "will-change". However, there would still remain issues for R2 and R3.
Possible solutions for issues regarding R2 and R3 would be as follows.

Specifying CSS transforms more closely
e.g.
- Browser tries to keep a smoothness during frequently updating transform attribute, without re-rendering.
- Browser re-renders a bitmap so as to give a crisp view when transform attribute is infrequently updated.
<These might be described in ConformingSVGViewers, and CSS transforms spec might refer it at least for SVG transform.>
Specifying CSS will-change more closely
e.g.
- Browser tries to keep a smoothness of panning & zooming even though browser sacrifices other factors while "will-change:transform" is set.
- Browser re-renders a bitmap so as to give a crisp view when "will-change:transform" is unset.
- "will-change" might have an optional sub-value like "will-change: transform optimizespeed".
Using other way for panning & zooming utilizing Compositor Thread (e.g. using Web Animation) [1] [2]
- Currently, NOT found such a way
Modifying current implementations (Filing a bug)
- Gecko avoids unexpectedly re-rendering during GPU transformation.
- Chrome reflects the change of bitmap size in CPU space according to "3d transform".

Discussion points

Spec issues or implementation issues?
If the spec issues, CSS transforms issues or CSS will-change issues or ... ?
If the implementation issues, the performance should be improved and verified on a test suite.