iFrame doesn't resize and when clicking reduces the height by 20px per click

[SolaireSauce]

When the iFrame loads in there is too much space at the bottom and it doesn't resize the frame. When I left-click inside the iFrame it gets smaller by 20px , if I click it enough times it reaches the correct size eventually.

LOG: [iFrameSizer][Host page: iFrameResizer2] Received: [iFrameSizer]iFrameResizer2:1038:527:mousedown iframeResizer.js:144 [iFrameSizer][Host page: iFrameResizer2] Checking height is in range 0-Infinity iframeResizer.js:144 [iFrameSizer][Host page: iFrameResizer2] Checking width is in range 0-Infinity iframeResizer.js:144 [iFrameSizer][Host page: iFrameResizer2] Requesting animation frame iframeResizer.js:144 [iFrameSizer][Host page: iFrameResizer2] IFrame (iFrameResizer2) height set to 1038px iframeResizer.contentWindow.min.js:9 [iFrameSizer][iFrameResizer2] Trigger event: Mouse Up iframeResizer.contentWindow.min.js:9 [iFrameSizer][iFrameResizer2] Sending message to host page (iFrameResizer2:1028:527:mouseup) iframeResizer.js:144 [iFrameSizer][Host page: iFrameResizer2] Received: [iFrameSizer]iFrameResizer2:1028:527:mouseup iframeResizer.js:144 [iFrameSizer][Host page: iFrameResizer2] Checking height is in range 0-Infinity iframeResizer.js:144 [iFrameSizer][Host page: iFrameResizer2] Checking width is in range 0-Infinity iframeResizer.js:144 [iFrameSizer][Host page: iFrameResizer2] Requesting animation frame iframeResizer.js:144 [iFrameSizer][Host page: iFrameResizer2] IFrame (iFrameResizer2) height set to 1028px iframeResizer.contentWindow.min.js:9 [iFrameSizer][iFrameResizer2] Trigger event lock off iframeResizer.contentWindow.min.js:9 [iFrameSizer][iFrameResizer2] -- iframeResizer.contentWindow.min.js:9 [iFrameSizer][iFrameResizer2] Sending message to host page (iFrameResizer2:0:0:mouseleave:573:616) iframeResizer.js:144 [iFrameSizer][Host page: iFrameResizer2] Received: [iFrameSizer]iFrameResizer2:0:0:mouseleave:573:616

html:

<div *ngIf="showIframe" class="">
    <iframe
      appIframeResize
      width="100%"
      frameborder="0"
      [src]="iframeUrl | calioSafe: 'resourceUrl'"
    >
    </iframe>
  </div>

appIframeResize:

@Directive({
  selector: '[appIframeResize]'
})
export class IframeResizeDirective implements AfterViewInit, OnDestroy {

  component: IFrameComponent;

  constructor(public element: ElementRef) {
  }

  ngAfterViewInit() {
    const components = iframeResizer({
      checkOrigin: false,
      //  heightCalculationMethod: 'lowestElement',
      log: true
    }, this.element.nativeElement);

    this.component = components && components.length > 0 ? components[0] : null;
  }

  ngOnDestroy(): void {
    if (this.component && this.component.iFrameResizer) {
      this.component.iFrameResizer.close();
    }
  }
}

Windows 10 64bit Chrome

[davidjbradshaw]

Check your CSS n the iframe