ng-dialog not rendering UI outside viewport

Question

I have this strange UI issue using ng-dialog in my application. The UI outside initial UI that is not visible at the launch of the dialog, is not loaded automatically on scrolling down in the dialog screen.

I need to click on the elements to make them visible in the UI. Same way when I scroll up, the previously loaded UI elements are invisible and I have to click on them to make them visible.

I feel this is the case of loading UI elements only when they are patr of the viewport; however I am not sure how fix this bad user experience.

Any help on how to fix this appreciated.

Could you provide your code, plz? – Vladimir Furso Mar 30 '16 at 21:09 — Vladimir Furso, Mar 30 '16 at 21:09
following as I have the same issue – Ben Apr 07 '16 at 21:20 — Ben, Apr 07 '16 at 21:20

score 0 · Answer 1 · answered Jun 22 '16 at 15:04

I found a CSS trick to solve this problem. Just add this to your CSS (if you're using default theme):

.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;
}

ng-dialog not rendering UI outside viewport

1 Answers1