Ion-select doesn't show the content when clicked

Inside the form I have this:

<ion-item>
    <ion-select formControlName="title" required item-start>
        <ion-option value="1">Mr.</ion-option>
         <ion-option value="2">Mrs.</ion-option>
     </ion-select>
     <ion-label floating>{{'full-name' | translate}}</ion-label>
     <ion-input formControlName="fullName" type="text" required></ion-input>
            <img src="assets/imgs/icon_user.png" class="icon_user" item-end />
  </ion-item>

But it doesn’t show the dropdown when I clicked it. But if I remove this (i.e. ion-input ) control then I can see the dropdown. i.e. <ion-input formControlName="fullName" type="text" required></ion-input>

Note: I can see both controls on the form like so.

.ts

initForm() {
    this.signUpForm = this.formBuilder.group({
      title: ['1', Validators.required],
      fullName: ['', Validators.required],

    });
  }

This is not working on mobile view. You can change that on the browser and set it as galaxy s5 . After setting the device viewport you need to refresh the browser. i.e. f5. Do you know why this behavior?

test