我正在开发一款名为 Postman 的 Chrome 应用(https://chrome.google.com/webstore/detail/postman-rest-client-packa/fhbjgbiflinjbdggehcddcbncdddomop https://chrome.google.com/webstore/detail/postman-rest-client-packa/fhbjgbiflinjbdggehcddcbncdddomop)。在配备视网膜显示屏的 Macbook 上使用 Postman 时,不断出现一个奇怪的问题。
有时(大约每 20 次点击中就有 1 次),点击 UI 元素会使一半的 UI 消失。开发工具的“Elements”选项卡显示了正确的结构 - 所有的 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://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 https://cloud.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/ http://blog.getpostman.com/index.php/2015/01/23/ui-repaint-issue-on-chrome/
总而言之 - 问题似乎是围绕非常高分辨率的滚动元素的 GPU 合成(当滚动条占据右侧填充时)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)