ионный / угловой, элементы скрыты, когда они находятся вне зоны видимости

Question

У меня есть представление с PDF-изображением в backgroud, где пользователь может щелкнуть где-нибудь на изображении и добавить точку к int (что-то вроде в картах Google), затем я сохраняю эти точки и отображаю их, когда он возвращается.Это изображение-PDF может быть больше, чем размеры мобильного представления, следовательно, прокрутить ось X / Y.Проблема состоит в том, что когда есть точка соприкосновения за пределами первоначального вида пользователя, она не видна, ЕСЛИ пользователь не нажимает на изображение, тогда точка соприкосновения становится видимой (она все время находится в DOM).Этот точный пункт - дефект

ниже фона:

<ion-content>
  <ion-scroll  scrollX="true" scrollY="true" zoom="true">
      <defect *ngFor="let defect of visibleDefects" [defect]="defect" [scale]="scale"></defect>
  <div id="container" (click)="addDefect($event)" #container>
    <canvas id="canvas">
    </canvas>
  </div>
  </ion-scroll>
</ion-content>

дефект html:

<div class="marker-holder" (click)="showDetails()">
  <ion-icon #icon [class.pulsate-bck]="animate" name="pin" [ngClass]="defect.priority.toLowerCase()"></ion-icon>
</div>

дефект.ts

Component({
  selector: 'defect',
  templateUrl: 'defect.html'
})
export class DefectComponent {

  text: string;
  animate = false;

  constructor(private modalCtrl: ModalController) {
    console.log('Hello DefectComponent Component');
    this.text = 'Hello World';
  }

  @Input() defect: Defect;
  @Input() scale: number;

  @HostBinding('style.left.px')
  get left() {
    return this.defect.posX * this.scale;
  }

  @HostBinding('style.top.px')
  get top() {
    return this.defect.posY * this.scale;
  }

ДО ЩЕЛЧКА

ПОСЛЕ ЩЕЛЧКА:

В DOM нет измененийкак скрытый или что-то подобное