safari input에서 text색 다르게 보일 때

문제

웹앱 작업을 하는데 input 창에 default로 들어가는 텍스트의 컬러가 웹과 크롬으로 테스트했던 안드로이드에서는 원하는 #333으로 잘 보이는데, 사파리에서만 어딘가 흐리게 보였다.

원인

사파리 브라우저가 input에 default로 값이 있을때 opacity를 자동으로 조절하고 있었음

해결방법

input css에

opacity: 1;
-webkit-text-fill-color: #333;

을 추가한다.

혹시 placeholder에 text 컬러를 지정해 두었다면
예를들면 #f9f9f9

input::placeholder {
-webkit-text-fill-color: #f9f9f9;
}

를 지정해 주어야 한다.