iOS 3.2에서 웹 응용 프로그램 내부의 문자가 잘못되었습니다.

Question

iOS 장치 용으로 작성한 webapp에 문제가 있습니다. iOS 3.x에서만 나타납니다.

계산 된 스타일은 다음과 같습니다 :

-webkit-appearance: none; 
-webkit-background-clip: padding-box; 
-webkit-border-horizontal-spacing: 2px; 
-webkit-border-vertical-spacing: 2px; 
-webkit-box-shadow: rgba(0, 0, 0, 0.199219) 0px 1px 4px 0px inset; 
-webkit-rtl-ordering: logical; 
-webkit-user-select: text; 
background-attachment: scroll; 
background-clip: padding-box; 
background-color: #F0F0F0; 
background-image: none; 
background-origin: padding-box; 
border-bottom-color: #B3B3B3; 
border-bottom-left-radius: 9px; 
border-bottom-right-radius: 9px; 
border-bottom-style: solid; 
border-bottom-width: 1px; 
border-collapse: collapse; 
border-left-color: #B3B3B3; 
border-left-style: solid; 
border-left-width: 1px; 
border-right-color: #B3B3B3; 
border-right-style: solid; 
border-right-width: 1px; 
border-top-color: #B3B3B3; 
border-top-left-radius: 9px; 
border-top-right-radius: 9px; 
border-top-style: solid; 
border-top-width: 1px; 
color: #333; 
cursor: auto; 
display: inline-block; 
font-family: Helvetica, Arial, sans-serif; 
font-size: 16px; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
height: 22px; 
letter-spacing: normal; 
line-height: 22px; 
margin-bottom: 2px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 2px; 
padding-bottom: 6px; 
padding-left: 6px; 
padding-right: 6px; 
padding-top: 6px; 
text-align: auto; 
text-indent: 0px; 
text-shadow: white 0px 1px 0px; 
text-transform: none; 
width: 378px; 
word-spacing: 0px; 

이 테이블 행 내부의 정상적인 입력 필드는 다음

내가 데 문제입니다.

무슨 일이 일어나고 있는지 아이디어가 있으십니까?

Answer 1

Safari는 스노우 레오파드 (Snow Leopard)의 표준 "수정본"이 더 이상 작동하지 않으므로 하위 픽셀 렌더링을 사용하여 텍스트를 "대량 출력"합니다. 사파리 4/스노우 레오파드의 경우 텍스트 그림자를 사용하고 그 밖의 모든 경우 body 요소에 -webkit-font-smoothing을 지정하십시오. 몸 {-webkit-글꼴 스무딩 : 앤티 앨리어싱}

Answer 2

아마 당신은 응고 텍스트의 "배경"으로

text-shadow: #333 0 0 0, white 0 1px 0; 

첫 번째 그림자 기능을 사용하여 문제를 해결할 수 있습니다.