Искаженный текст в iOS 3.2 внутри веб-приложения - PullRequest
1 голос
/ 20 декабря 2010

У меня проблема с веб-приложением, которое я пишу для устройств iOS. Это проявляется только в iOS 3.x.

Вот проблема, с которой я столкнулся:

problematic field

Расчетный стиль:

-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;

Это обычное поле ввода внутри строки таблицы.

Есть идеи о том, что происходит?

Ответы [ 2 ]

1 голос
/ 20 декабря 2010

Safari использует субпиксельный рендеринг для «увеличения объема» текста, так как в Snow Leopard их стандартное «исправление» больше не работает. Для Safari 4 / Snow Leopard используйте text-shadow, а для всего остального поместите -webkit-font-smoothing на элемент body, вот так. тело {-webkit-шрифт-разглаживание: сглаженный}

0 голосов
/ 30 декабря 2010

Может быть, вы можете исправить это, используя

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

Первая тень работает как «фон» для свернутого текста.

...