app goes half hidden with scroll bug (iOS & Safari)

[ippeiukai]

There is a weird bug with scrolling on iOS (reproducible with Safari on Mac).

It seems .scrollIntoView() on an ion-item inside the modal scrolls the parent ion-app component.

ionic4-datepicker/projects/ionic4-datepicker/src/lib/ionic4-datepicker-modal/ionic4-datepicker-modal.component.ts

Line 112 in 33f91b7

document.getElementById(iditem).scrollIntoView();

[ippeiukai]

My current workaround:

function startSuppressingIonAppScroll(): () => void {
  const ionAppEl = document.querySelector('ion-app');
  if (ionAppEl == null) {
    return;
  }

  let forceScrolling = false;
  const scrollListener = (ev: Event) => {
    if (!forceScrolling) {
      forceScrolling = true;
      (ev.target as HTMLElement).scrollTop = 0;
      (ev.target as HTMLElement).scrollLeft = 0;
    }
    forceScrolling = false;
  };

  ionAppEl.addEventListener('scroll', scrollListener);
  return () => {
    ionAppEl.removeEventListener('scroll', scrollListener);
  };
}

  private stopSuppressingIonAppScroll: Function = null;

  ngOnInit() {
    this.stopSuppressingIonAppScroll = startSuppressingIonAppScroll();
  }

  ngOnDestroy() {
    if (this.stopSuppressingIonAppScroll != null) {
      this.stopSuppressingIonAppScroll();
      this.stopSuppressingIonAppScroll = null;
    }
  }

This makes the app usable but leaves a flicker.

[Isaac-Sc]

I've got the same problem, and also the year selector is resulting in the content going blank. Only happening in iOS. I can't find a workaround for this, is there any way to fix it?

I've had to hide the year selector with css which isn't ideal.

Follow up: the year issue was caused by the to and from dates, they need to be moment dates for it to work in iOS, Android seems to accept standard js dates or moment dates.

Also, original reported issue is fixed with iOS 13+.

[wuttyee-pyae]

I am also facing that issue.If you find some solution.Please sharing with me.Thanks in advance.

Edited : As for me,i changed overflow:none in ion-modal.And it works fine.

[Robertjr1992]

@wuttyee-pyae Hello Can you help me with the Year selector issue going blank in iOS where do I need to add overflow: none

[manasmahala]

@wuttyee-pyae I am also facing the same issue in iOS 14. Where to add overflow:none. Can't find ion-modal. Can you please help to solve this

[manasmahala]

.ios ion-modal {
--overflow:none;
}

Added the above in variable.scss and magically the issue has been fixed. Yup