[이슈노트] iOS 이슈 모음 #3 (overflow : scroll, border-radius)

 

 

1.  overflow : scroll 이 안먹히거나, 이상하게 먹히는 이슈

 

개인 정보 체크 부분에 있는 상세 부분에 높이값 지정하고 overflow 스크롤 줬는데, 

이게 한개일때는 괜찮은데 두개일때 아래에 있는 부분이 이상하다. 

처음에 이게 뭔가 싶었는데 사파리에서만 있는 이슈인걸 확인하고 구글에 검색했더니 ...

이게  ios는 touch 값을 지정해 주지 않으면 overflow : scroll의 동작이 자연스럽지 않다고 한다.

ios 때문이라도 앞으로 overflow:scroll 사용시 overflow-scrolling : touch를 꼭 사용해야겠다.

 

 

overflow:scroll;
-webkit-overflow-scrolling:touch;

 

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/-webkit-overflow-scrolling

 

 

 

---

 

 

 

 

2. overflow : hidden 그리고 border-radius 안먹히는 이슈

 

 

라운드 효과를 주고 overflow:hidden으로 여백 처리를 하고 싶은데, 

ios에서 overflow:hidden이 안먹을때가 있다. 그럴땐 아래와 같은 css를 추가한다.

 

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

 

 

 

 

참고 : https://stackoverflow.com/questions/14383632/webkit-border-radius-and-overflow-bug-when-using-any-animation-transition/16681137