[CSS] 아이폰/맥OS/사파리 관련 CSS 이슈 및 해결법 정리

1. 모바일 사파리에서 font-size가 적용되지 않는 경우

미디어쿼리로 모바일에서 font-size를 작게 설정하는 경우, 개발자 도구에서 봤을때는 정상적으로 적용되어 있는데도 실제로는 적용이 안되어 있는 경우가 있었다. 예를 들면 font-size: 10px 등으로 작은 수치로 설정했을 경우 적용되지 않는 경우가 발생했다.

아이폰은 화면 비율에 따라 폰트 사이즈를 자동으로 세팅하는 경우가 있어 발생한 이슈.

-webkit-text-size-adjust: none; 적용해서 해결

 

2. 아이폰에서 a / button 태그의 폰트 컬러가 파란색으로 보이는 경우

a나 button에 폰트 컬러를 명시적으로 적용해주면 해결.

 

3. 모바일 사파리에서 input type="date" 텍스트 좌측정렬 하는 법

모바일 사파리에서는 기본적으로 input type="date"를 선택하면 선택된 날짜 텍스트가 input 영역의 중앙에 위치하게 된다.

좌측정렬을 적용하고 싶다면 input::-webkit-date-and-time-value { text-align: left; } 적용하면 된다.

 

4. 맥os 브라우저에서 스크롤 바운스 방지

맥에서 브라우저 스크롤 시 웹페이지 최하단에 도달했을 때 계속 스크롤을 하면, 페이지가 튕기듯이 움직이는 스크롤 바운스 효과가 있는데 이 효과를 제거해야 할 필요가 있었다.

overscroll-behavior-y: none; 을 적용해서 바운스 효과는 없앴지만 100% 지원이 되는지는 확인 필요할 듯.

 

 

참고 링크

https://blueamor.tistory.com/819

https://developer.apple.com/forums/thread/691305

https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/