Android Chrome poor performance on sencha touch 2.1

[stnlylee]

Hi all

I just upgraded my sencha touch app from 2.0.1.1 to 2.1 and sencha cmd 3.0. All good except the performance is poor in Android Chrome only (even Android default web browser performs well). Anyone knows this issue?

[cyee]

What type of performance are you referring to? There are lots of known scrolling issues that are supposed to be addressed in either 2.1.1 or 2.2.0; also, Android 4 in particular has known issues with the default browser.

[mroy100]

Same issue here. The scrolling are terrible in 2.1 with chrome (lists and panels) in android 4.2.1 (Nexus 7). You can use the kitchen sink 2.0.1 and 2.1 and you see big difference in performance (framerate on scrolling).

When do you think 2.1.1 will be out ? I have to choose to get back to 2.0.1 or to wait for the update.

[sven]

The biggest problem is that in ChromeMobile the ScrollPosition-translatable is used. When you change that to the CssTransform one, you will see major performance improvements.

However there is also one disadvantage, text will look blurry in some places.

I opened a ticket to get this fixed and also moved this thread to the bugs forum.

[mroy100]

With Dolphin, scrolls are acceptable. It's not as smooth as in the previous version but lot better than Chrome. The scrollbar looks the same on Chrome and Dolphin: opaque black rectangle (no corner radius / no opacity 0.5). But they looks correct in 2.0.1.

How can I use the CssTransform in 2.1 ? I would rather have blurry text than unusable scrolling. Hope a workaround will be available or a fix from Chrome.

Thanks

[sven]

Ext.define('overrides.Ext.util.Translatable', {  override: 'Ext.util.Translatable',
  requires: [
    'Ext.util.translatable.CssTransform',
    'Ext.util.translatable.ScrollPosition'
  ],


  constructor: function (config) {
    var namespace = Ext.util.translatable,
      CssTransform = namespace.CssTransform,
      ScrollPosition = namespace.ScrollPosition,
      classReference;


    if (typeof config == 'object' && 'translationMethod' in config) {
      if (config.translationMethod === 'scrollposition') {
        classReference = ScrollPosition;
      }
      else if (config.translationMethod === 'csstransform') {
        classReference = CssTransform;
      }
    }


    if (!classReference) {
      if (Ext.os.is.Android2) {
        classReference = ScrollPosition;
      }
      else {
        classReference = CssTransform;
      }
    }


    return new classReference(config);
  }
});

[mroy100]

Wow ! My list are now scrolling correctly and the text in the liste remains sharp !

The panels also scrolls very well but with blurry text... I can live with that...

Thanks for this quick workaround

[Jamie Avins]

This will be the default in upcoming versions. You may also want to remove the use of scroll in the Card animations.