Dlaczego promień obramowania nie działa poprawnie na wejściach tekstowych w MobileSafari?

Oto dokument HTML referencyjny:Dlaczego promień obramowania nie działa poprawnie na wejściach tekstowych w MobileSafari?

<!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 czyni dobrze na Safari/WebKit oparte przeglądarek desktopowych, ale na „MobileSafari” wariant, mianowicie przeglądarek iPhone i iPad, to świadczy o tym dziwnym polu , które niszczy iluzję zaokrąglonych narożników, gdy dane wejściowe są wyświetlane na różnie zabarwionym tle.

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

Źródło

2010-06-10 Abraham Vegh

Konsensus z internetu jest to, że jest to błąd w WebKit dla iOS. Nie używaj w telefonach iPhone.

Źródło

2010-06-10 21:30:32

Tak, to błąd, ale istnieje obejście problemu. Zobacz moją odpowiedź powyżej. – KevBurnsJr

Czy myślisz o zawijaniu pola tekstowego za pomocą rozpiętości/div/innego kontenera o promieniu obramowania?

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

...

<body> 
    <div class="inputWrapper"><input type="text" value="text" /></div> 
</body>

Źródło

2010-06-11 02:55:16

Nie widzę ten problem w moim miejscu, a ja używam -webkit-border-promień 8 pikseli z obrazu tła, który jest przypisany w styl ciała. Mam również ten styl dla mojego pola wejściowego:

-składka -krok-cień: 0px 5px 10px rgba (0,0,0,0,5);

Mimo że zaokrąglone rogi są wyświetlane dobrze, cień nie jest wyświetlany na mobilnym safari, mimo że wyświetla się dobrze na komputerowym safari. Może posiadanie stylu -webkit-box-shadow pozwala na działanie promiennika? Możesz spróbować, ponieważ działa dla mnie.

Można również spróbować użyć poszczególne style granicznych:

-webkit-border-top-left-promieniu -webkit-border-top-right-radius -webkit-border-bottom-lewo Promień -webkit-border-bottom-right-radius

Kiedy użyłem po prostu -webkit-border-radius dla zaznaczonego pola, to nie renderowało się poprawnie w mobilnym safari (znowu wersja desktopowa była w porządku). Kiedy zmieniłem ustawienie na indywidualne ustawienia stylu, wszystko działało dobrze.

Źródło

2010-08-10 23:34:03 imagimotion

Jestem prawie pewien, że próbowałem też, kiedy miałem ten problem. –

Udało mi się to naprawić, zmniejszając promień obramowania.

Błąd pojawia się tylko wtedy, gdy promień obramowania jest większy niż połowa wysokości elementu.

Więc jeśli -webkit-border-radius: 20px; upewnij się, że twój element ma co najmniej 40 pikseli wysokości.

W przeciwnym razie tła brzegowe zachodzą na siebie, powodując przerażające brzydkie pudełko.

Źródło

2011-03-09 05:59:08 KevBurnsJr

Dzięki, to działało dla mnie! –

KevBurnsJr: Jesteś niesamowitym człowiekiem, dzięki. Grałem z tym przez jakiś czas i nie mogłem zmusić ich do spojrzenia wprost na iPada. Twoje rozwiązanie jest jednak całkowicie sensowne, ponieważ jest matematyczne, jeśli oba rogi przekraczają połowę wysokości, wówczas promień nakłada się. Czy to błąd, który iOS renderuje inaczej niż Safari, nie jestem pewien, może mniej intuicyjny, ale wydaje się, że iOS jest po prostu bardziej rygorystyczny w tym konkretnym przypadku. Dzięki za opublikowanie notatki, mogę przejść do innych moich problemów z iPadem. ;) –

Dziękuję za tę odpowiedź, bardzo pomogłem. Chciałbym tylko dodać, że jest to problem z pre iOS 5. Więc nie możemy być leniwi z naszym 'border-radius'iem, który przypuszczam. – sic1

co powiesz na wprowadzenie danych wejściowych {-webkit-border-radius: 20px; kontur: 0; } zobacz wynik .. :)

Źródło

2013-03-31 12:36:10 shafiq

Dlaczego promień obramowania nie działa poprawnie na wejściach tekstowych w MobileSafari?

Odpowiedz

Powiązane problemy