BUG: popper on iPhone only "flashes"

[alondahari]

Describe the bug On an iPhone + safari, popper flashes and hides immediately. Works fine on desktop.

To Reproduce Set popper to trigger on click and click it

Expected behavior Popper shows until an outside click

Smartphone (please complete the following information):

• Device: iPhone x
• OS: iOS 12
• Browser safari
• Version 14

[tonysamperi]

@jazzdragon hi, thanks a lot for reporting. I don't have an iPhone so I don't know how to debug this... Could you please try on the popper.js page? https://popper.js.org/ To see if it's the original library or there's actually a problem here. Thanks in advance.

[alondahari]

Hi thanks for the quick response. I did try on there and it's working fine on the tutorial page, should've mentioned. Here's a video of it on a simulator: https://www.dropbox.com/s/qxtf5rvesltnyad/popper-issue.mov?dl=0

Relevant code:

You can make a very nice-looking named code block using small headers and inline code, like so:

info-popover.component.ts

import { Component, Input } from '@angular/core'
import { NgxPopperjsPlacements, NgxPopperjsTriggers } from 'ngx-popperjs'

@Component({
  selector: 'app-info-popover',
  templateUrl: './info-popover.component.html',
  styleUrls: ['./info-popover.component.scss'],
})
export class InfoPopoverComponent {
  @Input()
  tooltip!: string

  get tooltipPlacement(): NgxPopperjsPlacements {
    return NgxPopperjsPlacements.TOP
  }

  get tooltipTrigger(): NgxPopperjsTriggers {
    return NgxPopperjsTriggers.click
  }
}

info-popover.component.html

<popper-content #popover>
  <p>{{ tooltip }}</p>
</popper-content>

<img
  src="assets/svg/icons/information-circle.svg"
  alt="More information"
  [popper]="popover"
  [popperPlacement]="tooltipPlacement"
  [popperTrigger]="tooltipTrigger"
/>

any component using the popper

    <div>
      <label [for]="name">
        {{ label | translate }}
      </label>

      <app-info-popover [tooltip]="tooltip"></app-info-popover>
    </div>

[tonysamperi]

@jazzdragon I'm not sure of the effects of wrapping the popper in such way. The parent component style could affect the popper and cause the issue. Could you please let me know if it works fine on my demo page? https://tonysamperi.github.io/ngx-popperjs/

It looks exactly like the other one but this is Angular.

Thanks

[tonysamperi]

I verified myself now that I have an iPhone. It works just fine on Safari, on iOS 14. It's something with your style.