angularjs - ng-dialog 不在视口之外呈现 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;
}