部分用户界面不断消失在Chrome应用中 [英] Parts of the UI keep disappearing in a Chrome app

问题描述

我正在开发名为Postman的Chrome应用（ https ：//chrome.google.com/webstore/detail/postman-rest-client-packa/fhbjgbiflinjbdggehcddcbncdddomop ）。在使用邮递员的Macbook上使用视网膜显示器时，一个奇怪的问题会不断出现。

有时（大约20个点击中的1个），点击UI元素会使一半UI消失。开发工具的元素选项卡显示正确的结构 - 所有div都在那里，并带有display：block。他们只是没有渲染。调整窗口大小会强制重绘，所有元素都会再次显示。 （我目前正在使用Chrome v 37.0.2062.94）

控制台中没有打印错误。

到目前为止，这个问题只在具有视网膜显示的Macbook上报告过。我已经在Canary上转载了这个内容。

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

解决方案

我们检查了所有含有 overflow：scroll; 的元素，并添加了 -webkit-transform：translate3d（0,0,0）; 强制在这些元素上实现更好的硬件加速。

解决了这个问题。详细信息发布在 http：/ /blog.getpostman.com/index.php/2015/01/23/ui-repaint-issue-on-chrome/

总结 - 这个问题似乎是在非常高的分辨率下，滚动元素的GPU堆栈（当滚动条占用正确的填充时）。

I'm working on a Chrome app called Postman (https://chrome.google.com/webstore/detail/postman-rest-client-packa/fhbjgbiflinjbdggehcddcbncdddomop). While using Postman on a Macbook with a retina display, a weird problem keeps cropping up.

Sometimes (about 1 in 20 clicks), clicking on a UI element makes half the UI vanish. The 'Elements' tab of dev tools shows the correct structure - all the divs are there, with display: block. They're just not rendered. Resizing the window by a tiny amount forces a redraw, and all elements become visible again. (I'm currently using Chrome v 37.0.2062.94)

There are no errors printed in the console.

So far, this issue has only been reported on Macbooks with a retina display. I've reproduced this on Canary as well.

Screenshots: 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

解决方案

We went through all elements that had overflow: scroll; and added -webkit-transform: translate3d(0,0,0); to force better hardware acceleration on those elements.

That fixed the problem. Full detail is posted at http://blog.getpostman.com/index.php/2015/01/23/ui-repaint-issue-on-chrome/

To sum it up - the issue seems to be around GPU-composting of scrolling elements (when scrollbar occupied right padding) in very high resolutions.

这篇关于部分用户界面不断消失在Chrome应用中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！