使用Nexus 4上的Angular / Phonegap + CSS Transitions渲染故障

Question

我正在使用Angular 1.0.8＆amp ;; Cordova 3.1支持iOS＆amp; Android系统。我给出了一般性的描述，因为一些信息是专有的，但希望它足以解释。

我正在努力修复我们已经看到的错误，其中包含使用（使用chart.js）构建的图表的一个页面在Nexus 4上呈现错误。我们运行的测试设备正在运行Android 4.2.2，虽然在其他Nexus 4设备上已经看到了这个bug;但不在其他Android设备上。图表将显示两次，其中一个图表与另一个图表重叠，或者根本无法显示。无论哪种方式，打开和关闭我们的导航菜单（这是一个使用JS＆amp; CSS3 translate3d和过渡到功能的非画布菜单）似乎重置视图并且图表正确显示。

我已经逐步添加/删除了整个应用的CSS，但仍然无法确定导致此渲染问题的确切原因。如果我从页面上的其他元素（不是包含相关图表的元素）中删除position：relative，width声明和float声明，那么图表似乎正确显示;但是，这不是一个可行的解决方案。

我完成的事情：

• 设置android：hardwareAccelerated =＆＃34; true＆＃34;在我们的清单文件中
• 删除了通常有问题的CSS属性（box-shadow，border-radius，transitions和translate3d等）;问题仍然存在
• 尝试了几种已知有助于与CSS转换相关的闪烁的方法，例如-webkit-backface-visibility：none，-webkit-perspective：1000，-webkit-transform-style：preserve3d等。没有人解决这个问题。

我已经看到整个应用程序中的其他渲染故障已通过上述调整解决;但是，图表呈现问题仍然不受影响。

同样，这只发生在Nexus 4 上。不幸的是，它是我需要支持的设备，而这个bug会创建一个实质性的UI块;用户无法读取图表数据。

此时我甚至不确定在哪里集中我的故障排除工作。任何帮助，任何建议，都表示赞赏;希望有人提到一些有助于澄清此设备上发生的事情。提前致谢。

Answer 1

根据此主题中的评论结束找到我的答案：code.google.com/p/android/issues/detail?id=35474。 （与Android版本中的canvas元素渲染相关的bug＆gt; 4.溢出：隐藏在canvas元素的所有父元素上似乎在许多情况下修复了它，但是这对我来说不是一个选项，所以我不得不使用＃41 （在渲染之前和之后调整元素不透明度。）最后解决了这个错误。