아이폰 사파리 버그/이슈 정리

아이폰 사파리에서 scroll 이벤트 버그

1
2
3
window.addEventListener('scroll', function(e) {
	// do something
});
  • 위의 코드는 사용자가 스크롤을 할때마다 발생되어야 하지만 iOS UIWebViews에서는 스크롤이 끝난다음 호출이 된다.
  • WKWebViews 에서는 발생하지 않기 때문에 WKWebViews로 변경하면 해결할 수 있다.

References

아이폰 사파리에서 클릭 이벤트가 되지 않을 경우

아이폰 사파리에서는 a link, input을 제외하고 클릭 이벤트에 대해 event delegation을 지원하지 않는다.

아래 글을 읽어 보면 메모리 관리 문제가 있어 일부러 막은것으로 추정된다.

그래서 클릭 이벤트 동작을 시키기 위해서 <a href=‘#’></a> 감싸 우회하면 동작을 한다.

References

touch시 화면 깜빡임 없애는 방법

css에 아래 내용을 추가해 주면 됩니다.

1
-webkit-tap-highlight-color: transparent;

References

iPhone XS 에서 키보드가 올라온 후 스크롤 이상 현상 해결 방법

input에 터치 후 키보드가 올라오고 난 후 사라지면 스크롤이 키보드가 올라오기전 상태로 돌아가지 않는 버그가 있습니다.

해당 버그는 아래와 같이 회피해야 할거 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
...

handleInputFocus = (e) => {
    if(this.isIOS){
      this.scrollY = window.pageYOffset || document.documentElement.scrollTop;
    }
  }

  handleInputBlur = (e) => {
    if(this.isIOS){
      window.scroll(0, this.scrollY)
    }
  }
  
  ...
  
  render() {
    return (
      <textarea onFocus={this.handleInputFocus} onBlur={this.handleInputBlur}></textarea>
		)
  }

References