현상

우리는 antd mobile을 사용 하고 있었고 주소입력 화면은 modal로 되어있었다. 주소를 검색하면 스크롤이 일어나고 하단에는 주소검색이라는 버튼이 있었다.

버튼영역에는 position:fixed를 가지고 있었고 이상하게도 아이폰인 경우 어떠한 브라우저에서도 position:fixed가 적용 안되는것만 같았다….. 😩
분명 영역은 잡혀있는데… 왜 안보이는것 일까…

antd를 사용하고 있어서 기존에 am-modal-body안에 modal-body로 마크업이 되어있었다. 그럼 modal-body height를 제대로 모르는게 아닐까???

리서치

position:sticky 해결

  • position:sticky로 해결 하셨다는 글… 전에 sticky사용한적이 있지만… 부모영역에 overflow: hidden있으면 적용이 안되는 문제가 있었다… 우리는 antd를 사용하기 떄문에 antd에서 사용하는 css, html은 수정하기 어렵다…
  • -webkit-overflow-scrolling:touch;를 사용하면 된다고 하였지만… 이미 적용이 되었있다…..

translateZ(0) 해결

  • -webkit-transform: translateZ(0) 적용을 해본 결과… 반응이 느리다… 하단에 붙어있어야할 버튼이 스크롤을 할떄 마다 움찍이는 현상…
  • scrolltop 과 같이 스크롤이 빠르게 진행되다보면 fixed 레이어가 사라지게 된다. z-index가 안먹힌다. 같은 현상이다

스크립트로 해결

  • 고민하였지만… 패스

문제의 이유?

  • 하단 고정영역의 form 요소를 터치 했을때, iOS 의 기본 UI(키보드, 셀렉트박스 등)가 하단에서 올라오면서 스크롤이 html 문서상 form 요소의 위치로 강제 이동되는 것 이었다.
  • form요소가 fixed는 아닌데…

수정

결국 antd mobile에서 방법을 찾기로… 나중에 antd mobile를 걷어낼꺼지만… 일단 아직은 사용해야기 떄문…
modal에는 footer라는 속성이 있었고 타입은 Array {text, onPress}이 가능하다. 이 속성은 버튼을 만들어준다. 그럼 원했던 am-modal-body 같은 선상에 footer를 위치 시킬수 있다.
이렇게 해결!!!!