iOS Safari에서 세로 Flicking 사용 시 스크롤 체감 성능 및 클릭 이벤트 관련 문의

[jexists]

📝 이슈 내용 (Description)

안녕하세요.
ngx-flicking을 사용하면서 iOS Safari 환경에서 몇 가지 동작 관련하여 궁금한 점이 있어 문의드립니다.

사용 환경

• 라이브러리: ngx-flicking (egjs-flicking)
• 프레임워크: Angular
• 브라우저: iOS Safari / Android Chrome
• 구성
  -> 세로 Flicking (horizontal: false)
  ->Flicking 컴포넌트가 모달(Dialog) 내부에 위치

사용 코드
`<ngx-flicking [options]="flickingOptionsForHour" class="hour_flicking" #flickHour>

{{hour}}

<ngx-flicking [options]="flickingOptionsForMin" class="min_flicking" #flickMin>

{{min}}

{{ countMap[min] || 0 }}건

`

`baseFlickingOptions = {
align: 'prev',
horizontal: false,
circular: true,
interruptable: true,
};

ngOnInit() {
this.flickingOptionsForHour = this.createFlickingOptions(this.sel_hour);
this.flickingOptionsForMin = this.createFlickingOptions(this.sel_min);
}
`

문의 사항
① iOS Safari에서 세로 Flicking(horizontal: false) 사용 시 스크롤 체감 성능
iOS Safari에서 세로 Flicking을 사용할 경우,세로 스크롤이 약간 버벅이는 듯한 체감이 있습니다.
동일 설정에서 Android Chrome은 비교적 부드럽게 동작
👉 이 부분이 iOS Safari의 제스처 처리 특성상 자연스러운 동작인지,
아니면 권장되는 옵션 조합이나 회피 방법이 있는지 궁금합니다.

② Flicking 패널 클릭 이벤트가 간헐적으로 동작하지 않는 현상
flicking-panel에 등록한 click 이벤트가 간헐적으로 호출되지 않는 경우가 있습니다.
[발생 상황]

• 패널을 처음 탭했을 때는 클릭 이벤트가 발생하지 않음
• 같은 위치를 두 번째 탭했을 때 이벤트가 정상 동작하는 경우가 있음
• 또는, 아주 살짝 스크롤(또는 Flicking)을 움직인 후 다시 탭하면 정상적으로 동작
• 스크롤 또는 Flicking 동작 직후에 더 자주 발생하는 경향이 있음

참고 사항

• iOS에서 circular: false로 변경하면 스크롤 체감이 일부 개선됨
• 디자인

[daybrush]

@jexists

안녕하세요. DOM의 순서를 바뀌는 속성인 circular에 의해 성능이 문제가 되는 것으로 추측됩니다. 참고사항처럼 circular처럼 스크롤 체감이 개선됐다는 것으로 보아 useCSSOrder를 옵션을 활성화해보시겠습니까?

[jexists]

안녕하세요.
말씀해주신 내용 참고하여 useCSSOrder 옵션을 활성화한 상태로 테스트를 진행해봤습니다.

아래 링크에 간단한 샘플을 만들어 확인해봤습니다.
https://jexists.github.io/datepicker-test/

말씀주신 것처럼 circular 대신 useCSSOrder를 사용하는 경우 모바일에서 스크롤 체감은 확실히 개선된 것으로 보입니다.
다만, 모바일(안드로이드 / iOS) 환경에서 스크롤을 한 뒤, 간헐적으로 날짜 선택이 되지 않는 현상이 발생하고 있습니다.

스크롤 없이 바로 선택하는 경우에는 정상적으로 동작하는 것으로 보이며,
스크롤 이후 터치 이벤트 처리나 DOM 재정렬 방식과 연관된 이슈일 가능성도 있을 것 같습니다.

이와 관련해 추가로 확인해볼 만한 설정이나 권장 옵션이 있을지 조언을 부탁드립니다.

감사합니다.