Chrome应用中的部分用户界面消失了

Question

我正在开发一款名为Postman的Chrome应用程序(https://chrome.google.com/webstore/detail/postman-rest-client-packa/fhbjgbiflinjbdggehcddcbncdddomop)。在使用具有Retina显示屏的Macbook上使用Postman时，会遇到一个奇怪的问题。

有时(大约每20次中的1次)，单击UI元素会使一半的UI消失。开发工具的“元素”选项卡显示正确的结构-所有div都在那里，并且具有display:block属性。它们只是没有被渲染。通过微小地调整窗口大小来强制重新绘制，然后所有元素再次变得可见。(我目前使用的是Chrome v 37.0.2062.94)

控制台中没有打印错误。

到目前为止，这个问题只在具有Retina显示屏的Macbook上报告过。我也在Canary上复现了这个问题。

截图: https://cloud.githubusercontent.com/assets/1365493/4188877/06d8b6bc-3777-11e4-8c6b-3f23edfa7c5b.png https://cloud.githubusercontent.com/assets/681190/4188491/1c8f99a2-3773-11e4-8cc9-bbd5d3165530.png

- Osiris

---

这听起来像是Chrome的一个bug，所以Stack Overflow无法提供帮助。我建议前往https://crbug.com。 - Xan

我已经在那里提交了一个错误报告。只是想知道是否有人遇到过类似的问题并找到了解决方案。这个问题可以通过每次单击UI元素时强制调整大小来“解决”，但这是一种糟糕的用户体验。 - Osiris

请在问题中添加错误链接，或者至少在评论中添加链接，反之亦然（在错误评论中添加此问题的链接）。 - Xan

请查看 https://code.google.com/p/chromium/issues/detail?id=412299 上的Chromium错误。 - Osiris

Answer 1

我们检查了所有具有overflow: scroll;属性的元素，然后添加了-webkit-transform: translate3d(0,0,0);以强制对这些元素进行更好的硬件加速。这样就解决了问题。详细内容请参见http://blog.getpostman.com/index.php/2015/01/23/ui-repaint-issue-on-chrome/。简而言之，这个问题似乎是在非常高的分辨率下占用右填充滚动条的元素的GPU合成中出现的。

- Shamasis Bhattacharya

---

看起来要跟踪的错误现在是 https://code.google.com/p/chromium/issues/detail?id=437905 并且看起来将在接下来的几个版本中修复。你能在金丝雀版上进行测试吗？ - Xan