ng-对话框不在视口外部渲染UI

Question

我在应用程序中使用ng-dialog时遇到了这个奇怪的UI问题。初始UI之外的UI在启动对话框时不可见，在对话框屏幕中向下滚动时不会自动加载。

我需要单击元素以使其在UI中可见。同样，当我向上滚动时，先前加载的UI元素是不可见的，我必须单击它们才能使其可见。

我觉得只有当UI元素位于视窗中时，才会加载这些元素；然而，我不确定如何修复这种糟糕的用户体验。

任何关于如何解决这个问题的帮助都将不胜感激。

Answer 1

我找到了一个CSS技巧来解决这个问题。只需将此代码添加到您的CSS中(如果您使用的是默认主题)：

.ngdialog.ngdialog-theme-default .ngdialog-content {


  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}