Почему границы границ не работают должным образом при вводе текста в MobileSafari? - PullRequest
Новая
       4

Почему границы границ не работают должным образом при вводе текста в MobileSafari?

5 голосов
/ 10 июня 2010

Вот справочный HTML-документ: 

<!DOCTYPE html>
<html>
    <head>
    <style>
body { background-color: #000; }
input { -webkit-border-radius: 20px; }
    </style>
    </head>
    <body>
        <input type="text" value="text" />
    </body>
</html>

border-radius прекрасно воспроизводится в браузерах настольных компьютеров на базе Safari / WebKit, но в варианте «MobileSafari», а именно в браузерах iPhone и iPad,визуализируется с помощью этого странного прямоугольника, который уничтожает иллюзию закругленных углов, когда ввод отображается поверх разноцветного фона.

http://cl.ly/1LUi/content

Ответы [ 5 ]

15 голосов
/ 09 марта 2011

Мне удалось это исправить, уменьшив радиус границы.

Ошибка, по-видимому, появляется, только если радиус границы больше половины высоты элемента.

Так что если -webkit-border-radius: 20px;убедитесь, что ваш элемент имеет высоту не менее 40 пикселей.

В противном случае фоны границ перекрываются, вызывая страшную уродливость.

2 голосов
/ 11 июня 2010

Консенсус со всего Интернета заключается в том, что это ошибка в WebKit для iOS. Не используйте border-radius на text input с на iPhone.

1 голос
/ 11 июня 2010

Рассматривали ли вы обтекание текстового поля контейнером span / div / other с радиусом границы? 

<style>
    body { background-color: #000; }
    .inputWrapper { -webkit-border-radius: 20px; }
</style>

... 

<body>
    <div class="inputWrapper"><input type="text" value="text" /></div>
</body>
0 голосов
/ 31 марта 2013

как насчет ввода input {-webkit-border-radius: 20px; очертание: 0; } увидеть результат ..:)

0 голосов
/ 11 августа 2010

Я не вижу этой проблемы на своем сайте, и я использую -webkit-border-radius 8px с фоновым изображением, которое назначено в стиле тела.У меня также есть этот стиль для моего поля ввода:

-webkit-box-shadow: 0px 5px 10px rgba (0,0,0,0.5);

Хотя закругленные углы отображаются вверхХорошо, тень на экране в мобильном сафари вообще не отображается, даже если она хорошо отображается в настольном сафари.Может быть, использование стиля -webkit-box-shadow позволяет работать с указателем радиуса ??Вы можете попробовать, потому что он работает для меня.

Вы также можете попробовать использовать отдельные стили границ:

-webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-left-radius -webkit-border-bottom-right-radius

Когда я использовал просто -webkit-border-radius для поля выбора, он не отображалпрямо в мобильном сафари (снова настольная версия была в порядке).Когда я переключился на использование индивидуальных настроек стиля, он работал нормально.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...