显示模态窗口时显示Chrome/Webkit UI重绘问题(ngDialog)

Question

我正在使用Cordova,Bootstrap和Angular JS(1.3.x)开发混合应用程序,并在Chrome桌面浏览器和Android设备(棒棒糖,5.0.2)上进行测试.

在特定视图中,我使用ngDialog打开模态窗口.此对话框中的内容可能超过典型智能手机大小的高度,因此需要垂直滚动.这就是问题所在:

应该显示在对话框底部(初始视线之外)的大多数元素不会出现或不会被渲染.当我盲目地点击消失的交互元素所在的区域时,它们将被绘制.当我再次向上滚动时,顶部的元素消失. Android 4.4上不存在此行为.

现在,我可以在Windows Chrome浏览器(v43)上重现此错误.

这些是步骤:

1. 运行此Plunkr http://embed.plnkr.co/VGYUe2i9vwsQZ21vc3LB/preview
2. 使用最新的Chrome版本进行测试
3. 确保,此插件以嵌入视图显示(重要)
4. 打开Chrome开发者工具
5. 点击"切换设备模式"(智能手机图标)(重要)
6. 将垂直分辨率限制为高度约600px单击"打开对话框"并向下滚动到底部
7. 你能读一下"你好,你看到我了吗？" ？
8. 如果没有,请按下文本框顶部或下方的其中一个面板,这将导致重新绘制,您可以看到文本.

这是它的样子:

不行 - >标记为红色框中没有文字:

确定 - >点击它或浏览器选项卡切换后

我在postman博客上发现了这篇文章,但"修复工具"在我的案例中似乎不起作用. http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/

有人能指出我正确的方向吗？

Answer 1

我按照链接博客中的说明进行操作,这些似乎对我有用.具体来说,添加

-webkit-transform: translate3d(0,0,0);

到我的CSS ngDialog-content有overflow-y: scroll.

现在div为我滚动负载.

另一个好消息是,至少我的问题似乎已经在Chrome Canary中消失了,所以如果问题仍然存在,那么可能值得一看.