After update the android chrome version 65, application does not works, Sencha touch and cordova android

问题

After update the chrome version 65, application is showing the splash screen again when taping some click event, it's a hybrid app Sencha touch and Cordova android.

回答1:

Edit: this is a known chrome 65 bug which is marked to be fixed in chrome 67.

Edit 2: Confirmed to be fixed on Chrome 67. You will need to update "Android System WebView" on Android devices to get the fix.

I believe this is a Chrome 65 bug.

I have a deployed Sencha Touch application using version 2.4.2. About a week ago I started getting complaints that the application freezes.

After debugging I found that this quick fix bypasses the issue by disabling animations on the message boxes (add to your app init, like in app.js):

Ext.Msg.defaultAllowedConfig.showAnimation = false;
Ext.Msg.defaultAllowedConfig.hideAnimation = false;

I still haven't given up on my nice animations, so I kept debugging. After several hours, turns out the problem seems to stem from Chrome 65 behaving differently around window.getComputedStyle() under very specific conditions. Sencha Touch uses a hidden iframe with a hidden div inside to apply styles and get the computed values of the applied values. It then uses those computed values to apply the animation style string for the message boxes. You can see it for yourself, add console.log(value) before the return of the getCssStyleValue function in touch/src/fx/runner/CssTransition.js, and then show a message box (Ext.Msg.alert) and clicking "OK" on it. Chrome 65 will output "none", while Chromium 64 outputs matrix(1, 0, 0, 1, 0, 0). I tested this using Chromium 64.0.3282.0 (Developer Build) (64-bit). Note that if you debug line-by-line, the bug will not appear. This seems to be a race condition on Chromium's side.

I was able to reproduce the issue directly on the browser without using Sencha Touch (JsFiddle):

var iframe = document.createElement('iframe');
var iframeStyle = iframe.style;
iframeStyle.setProperty('visibility', 'hidden', 'important');
iframeStyle.setProperty('width', '0px', 'important');
iframeStyle.setProperty('height', '0px', 'important');
iframeStyle.setProperty('position', 'absolute', 'important');
iframeStyle.setProperty('border', '0px', 'important');
iframeStyle.setProperty('zIndex', '-1000', 'important');

document.body.appendChild(iframe);
var iframeDocument = iframe.contentDocument;

iframeDocument.open();
iframeDocument.writeln('</body>');
iframeDocument.close();

var testElement = iframeDocument.createElement('div');
testElement.style.setProperty('position', 'absolute', 'important');
iframeDocument.body.appendChild(testElement);

testElement.style.setProperty("transform", "translateX(0) translateY(0) translateZ(0) rotate(0) rotateX(0) rotateY(0) rotateZ(0) skewX(0) skewY(0) scaleX(1) scaleY(1) scaleZ(1)");

var computed = window.getComputedStyle(testElement).getPropertyValue("transform");

alert(computed);

If you play around with this, you'll see it only happens when the DIV is inside of an iframe, and in these specific conditions. As I said, my temporary solution is to disable the animations, but I will go ahead now and try to file a bug report with the Chromium project.

Unfortunately I'm not thrilled with poking around this Sencha Touch code to try to find another way to get the computed values. I think Sencha did a lot of work to make sure all of this stuff works cross-browser, so I really hope this will be fixed in one of Chrome's coming versions.

I think this is in addition to Android 8 user agent header bug mentioned by Grigoriy, since it happens on desktop versions of Chrome as well.

I learned my lesson, make sure to test regularly on Chrome Beta or Dev releases...

Hope this helps.

回答2:

Replaced all animateActiveItem with setActiveItem and disabled animation then it started to work again.

来源：https://stackoverflow.com/questions/49357047/after-update-the-android-chrome-version-65-application-does-not-works-sencha-t