更新android chrome 65版后，应用程序无法运行，Sencha touch和cordova android

Posted 2023-02-26

【中文标题】更新android chrome 65版后，应用程序无法运行，Sencha touch和cordova android

【英文标题】：After update the android chrome version 65, application does not works, Sencha touch and cordova android

【发布时间】：2018-03-19 06:33:55

【问题描述】：

在更新 chrome 65 版本后，应用程序在点击某些点击事件时再次显示启动画面，这是一个混合应用程序 Sencha touch 和 Cordova android。

【问题讨论】：

我最近在 Android Oreo 上的 Chrome 中遇到了问题，由于 Ext.env.Browser 中的错误（我使用 Extjs 而不是 sencha touch），网站没有启动。问题出在用户代理标头中。试着朝那个方向看。

【参考方案1】：

编辑：这是一个known chrome 65 bug，在 chrome 67 中被标记为已修复。

编辑 2：确认已在 Chrome 67 上修复。您需要在 Android 设备上更新“Android System WebView”才能获得修复。

我相信这是 Chrome 65 的错误。

我有一个使用版本 2.4.2 部署的 Sencha Touch 应用程序。 大约一周前，我开始收到有关应用程序冻结的投诉。

调试后我发现这个快速修复通过禁用消息框上的动画绕过了这个问题（添加到您的应用程序初始化中，如在 app.js 中）：

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

我还没有放弃我漂亮的动画，所以我一直在调试。几个小时后，问题似乎源于 Chrome 65 在非常特定的条件下在 window.getComputedStyle() 周围的行为不同。 Sencha Touch 使用带有隐藏 div 的隐藏 iframe 来应用样式并获取应用值的计算值。然后它使用这些计算值来为消息框应用动画样式字符串。 可以自己看，在touch/src/fx/runner/CssTransition.js的getCssStyleValue函数的返回前加上console.log(value)，然后显示一个消息框（Ext.Msg.alert），点击“确定”就可以了。 Chrome 65 将输出“none”，而 Chromium 64 输出 matrix(1, 0, 0, 1, 0, 0)。我使用Chromium 64.0.3282.0 (Developer Build) (64-bit)对此进行了测试。请注意，如果您逐行调试，则不会出现该错误。这似乎是 Chromium 一方的竞争条件。

我能够在不使用 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);

如果您尝试使用此功能，您会发现它仅在 DIV 位于 iframe 内且在这些特定条件下才会发生。正如我所说，我的临时解决方案是禁用动画，但我现在会继续尝试向 Chromium 项目提交错误报告。

不幸的是，我不喜欢在这个 Sencha Touch 代码中寻找另一种方法来获取计算值。我认为 Sencha 做了很多工作来确保所有这些东西都可以跨浏览器运行，所以我真的希望这个问题能够在 Chrome 即将推出的版本中得到解决。

我认为这是 Grigoriy 提到的 Android 8 用户代理标头错误的补充，因为它也发生在桌面版本的 Chrome 上。

我吸取了教训，请务必定期测试 Chrome Beta 或 Dev 版本...

希望这会有所帮助。

【讨论】：

感谢您的回答，我已将煎茶触摸页面动画去掉，直接设置项。 this.getMainContainer().setActiveItem(card);而不是这段代码， this.getMainContainer().animateActiveItem(card, animation);更改代码后，我们发现了另一个与此相关的问题。 （随机页面导航）。

我做了同样的事情，我用 setActiveItem 替换了 animateActiveItem。我也遇到了 Ext.Msg.alert 的问题，它在你第一次调用它时起作用，第二次没有，从第三次开始它又开始起作用了。

@Prithiviraj 如果这确实是您的问题，请标记我的答案正确。

【参考方案2】：

用 setActiveItem 替换所有 animateActiveItem 并禁用动画，然后它又开始工作了。