[Debugging] iPhone X bottom SafeArea(layoutGuide) constraint issue

iPhoneX 에서만  다음 사진처럼 스크롤을 할때 해당 여백이 그대로 남아있어 floating button이 잘리는 이슈가 발생하였다.

결론부터 말하자면 원인은 constraint 제약을  아래와 같이 LayoutGuide(~iOS 10) 또는 safeArea(iOS11 ~)  와 설정해주었기 때문이었고, iPhoneX와 이전 디바이스들에 적용되는 layoutGuide와 safeArea의 차이점에 대해서 정확히 알고있지 못해서 발생한 문제였다.

아래 사진을 보면 알 수 있듯이 iPhoneX 에서 constraint을 safeArea 또는 layoutGuide와 설정해주게 될 때 safeArea를 제외한 부분 만큼(빨간색)의 여백(Home Indicator가 있는 부분)이 생기고있다.

위의 사진을 보면  같은 constraint을 걸어주었음에도 iPhone 4s, iPhone X에서는 다르게 표시됨 빨간색 여백이 남아있음)을 알 수 있다.

 iPhone 4s 외에도 iPhone X 이하 시리즈의 다른기기들에서도는 constraint을 bottomLayoutGuide 또는 safeArea와 걸어주더라도 위의 그림처럼 device의 바텀 부분에 빨간색으로 칠해진 부분만큼의 공간이 남지 않는것으로 보인다.

내게 issue 가 되었던 부분과 해결해야될 사항은

1.  iPhoneX의 빨간색으로 표시된 불필요한 여백공간이 남아 그대로 노출 되는 것이었고
2. 이 여백을 없애주어야만 하였다.

결국 상위 뷰와의 constraint(제약조건)을 layoutGuide나 safeArea로 주는것이 아니라 superView에 주는 방법으로 해결할 수 있는데

safeArea와 layoutGuide에 대해 다시 한번 자세히 알아보아야겠다

참고링크 : https://stackoverflow.com/questions/46322150/getting-a-white-space-at-bottom-of-iphone-x-screenxcode-9