[이슈노트] iOS 이슈 모음 #2 (img display:none)

 

작업 중 마지막 단계인 기기별 확인하기!

 

 

메인 컨텐츠를 화면 정 중앙에 맞추고 싶다는 기획자의 요청에 의해 높이를 100vh로 맞추고 컨텐츠는 absolute로 띄었다.

 

다른 폰에서는 괜찮았는데, 갤럭시 폴드 앞 화면에서 이슈가 생겼다.

메인 컨텐츠에 텍스트 입력 부분이 있었는데, 이 부분에 텍스트를 입력하려고 하자

자판이 올라오면서 자판을 뺀 높이가 100vh로 먹히면서 컨텐츠 위치가 엉망이 되어버렸다. 

 

그래서 어쩔 수 없이 뒤에 투명 이미지를 놓고 컨텐츠를 올렸다.

 

하지만 탭에서는 컨텐츠에 absolute를 뺀 상태였어서 img를 display:none 시켜야 했었는데,

이게 다른 기기에서는 괜찮은데 아이패드 6세대에서 이미지에 display:none이 안먹는거다...

도대체 이해가 안되서 아이디도 줘보고,, 별 짓을 다 하다가 구글에 검색해봤더니 바로 나왔다!

역시 구글 최고의 선생님 !!

 

알고보니 이게 apple 사파리 이슈였다.

이미지에 display:none이 안먹히기 때문에 

visibility: hidden; width: 0; height: 0;

을 사용해서 display: none과 같은 효과를 줘야했다.

 

visibility: hidden은 눈에만 안보이는 거기 때문에 공간을 없애기 위해 width와 height 값을 0으로 준거다. 

 

해결~~~

 

 

 

 

---

참고 : https://leeborn.tistory.com/entry/%EC%95%84%EC%9D%B4%ED%8F%B0%EC%97%90%EC%84%9C-displaynone%EC%9D%B4-%EC%95%88%EB%90%A0%EB%95%8C