Proposals/Performance in panning & zooming
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.
Results of study
R1: Smooth start of panning & zooming
R2: Smooth transition during panning & zooming
R3: Crisp view after finishing panning & zooming
We examined the performance of transformation in panning & zooming with "3d transform" such as "transform: translate3d ..." and "transform: scale3d ..." on actual browsers.
Firefox and Chrome is almost OK except for taking time to start panning (test #2).
|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.|
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
- 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.
- Specifying CSS will-change more closely
- 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)  
- 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".
- 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.