[CSS] iOS 11.2.1 max-height: calc(% - px) is not working

< 페어 드롭다운이 보이지 않고 있음 >

문제환경 : 아이폰X iOS 11.2.1 (크롬, 사파리)

문제현상 : 트레이드 페어 드롭다운이 보이지 않음

문제원인 : max-height: calc(100% - 44px) 이 먹히지 않음

해결방법

• 특정 iOS 버전에서 발생하는 이슈라고 생각하여, min-height: 85% 값을 방어책으로 넣어 둠
• 85% : iphone5 (최소 디바이스 사이즈) 기준으로 가로모드에서도 하단이 잘리지 않는 값
• 정상적인 다른 버전에서는 max-height 값이 더 크기 때문에 min-height 값에 영향없음

---

문제해결과정

• 화살표 방향, 배경색이 바뀌는 것으로 보아 .is-open 상태는 정상적으로 ON/OFF  되는 것으로 확인
• DOM 구조상 dropdown 부분이 제일 하단에 있어서 z-index 이슈도 아님
• 디버깅 결과 max-height: calc(100% - 44px)가 정상 동작 하지않는 것으로 확인 됨 

의문점

• v.11.2.1 동일한 환경을 가진 사람을 찾을 수 없고 현재까지는 버전이 낮아도 이슈 재현 안 됨
• 원래 cal() 동작 안하는 이슈는 사파리 버전 6 (iOS 7) 이하에서 발생하는 이슈임
• 단순히 cal()의 이슈라고 하기에는 다른 곳에 사용되고 있는 곳이 많음 (26 matches in 11 files)
• height: calc() - 8 matches in 6 files
• max-height: calc(% - px) - 1 match (트레이드 페어 드롭다운)

테스트 통과한 아이폰 버전

• 12.1 크롬 사파리 / 본인
• 11.4 크롬 사파리 / 유저플로우셀 테스트폰
• 11.3.1 크롬 사파리 / 동료
• 9.3.2 사파리 / 동료
• 11.0.2 사파리 / 모바일셀 테스트폰

---

✍🏻 메모

애플도 완벽할 수 없을 테니, 특정 버전에서만 발생하는 이슈가 있을 수 있다. (from CPO)

정상 유저에게 영향이 없고, 이슈가 발생한 특정 버전에는 최대한 비슷한 환경을 제공할 수 있는 방향으로 협의했다.

간만에 특정 이슈에 하루 종일 매달린 케이스였다. 모바일 사파리 화면을 맥북에 연결해서 디버깅 하는 방법을 배웠다.

min-height 로 fallback css를 작성했고, 가로 모드까지 고려한 %로 정했다.

정보를 빠르게 보여주는 드롭다운에 transition 값이 좀 느린(0.56s) 것 같다는 피드백을 받아 빠르게(0.3s) 조정했다.