Border-Radius funktioniert nicht in modernen nativen Android-Browser

Ich habe eine Seite, die Border-Radius verwendet. Im nativen Android-Browser wird es nicht gerundet angezeigt. es zeigt sich mit eckigen Ecken. Es zeigt sich im Desktop Chrome, IE, FF, usw. gut gerundet, aber nicht im nativen Telefon-Browser. Weiß jemand, ob dies ein Problem mit dem Browser selbst ist, einige zusätzliche CSS-Erweiterungen, die ich nicht verwende, usw.?Border-Radius funktioniert nicht in modernen nativen Android-Browser

Hier ist meine CSS (in der Demo):

.bigButton2 
{ 
    width: 320px; height: 200px; margin: auto; 
    padding: 20px; 
    background-color: #521c0b; color: #FFFFFF; 
    border: 3px solid #e3b21e; 
    border-radius: 30px;  
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
}

Ich habe eine JSFiddle einrichten: http://jsfiddle.net/VJvQA/

Ich habe mit Polsterung versucht, ohne Polsterung, mit Box-Sizing, ohne Box- Sizing, und es zeigt sich nur als scharfe Ecken. Jede Hilfe oder Einsicht wäre willkommen.

Ich weiß, dass jemand dies bereits unter (border-radius style doesn't work in android browser) gepostet hat, aber er hat keinen Code, JSFiddle, bereitgestellt, und es wurde falsch mit einer allgemeinen Frage ohne echte Antwort beantwortet; Ich würde es ablehnen, wenn ich könnte, aber ich nahm an, dass eine wirklich gut geschriebene Frage besser wäre. Vielen Dank!

Quelle

2013-07-31 HBlackorby

ich es in Android auf einem Galaxy S4 getestet haben aktiv, so die modernste Android nativen Browser gibt. – HBlackorby

Verschiedene Browser unterstützen verschiedene HTML5- und CSS3-Funktionen, sie sind nur ein Teil der Webentwicklung. – Robadob

Und ich würde nichts ausmachen, aber nach http://caniuse.com/border-radius, sollte es in Android-Browser arbeiten, so dass ich versuche zu sehen, ob es ein Fehler in dieser Browser UMSETZUNG ist, oder wenn Es gibt einen Konflikt in meinem CSS oder wie mein CSS geschrieben wird, das das Problem verursacht. – HBlackorby

Es stellt sich heraus, dieses Problem ist spezifisch für den Android-Browser auf dem Galaxy S4 und S4 aktiv. Es sieht so aus, als ob sie die Unterstützung für die verdichtete border-radius-Eigenschaft aufgehoben haben. Wenn Sie jedoch jede einzelne Ecke einzeln angeben, funktioniert sie einwandfrei. Ich poste einen Fehlerbericht an Android. Also, wenn Sie dies tun:

border-top-left-radius: 10px; 
border-top-right-radius: 10px; 
border-bottom-left-radius: 10px; 
border-bottom-right-radius: 10px;

Es funktioniert gut; Wenn Sie nur Rand-Radius haben: 10px; es wird ignoriert.

Dies wurde unter diesem Post beantwortet: Galaxy S4 stock browser CSS3 border-radius support? Ich wiederhole es nur hier. Aber ich habe ihre Lösung getestet und es funktioniert jetzt auch auf dem Galaxy S4 Active.

Quelle

2013-07-31 16:00:54 HBlackorby

Grats mit Ihrer Ausdauer, das ist eine seltsame Inkonsistenz. – Robadob

Ich laufe Cyanogenmod 11 auf dem S4 und nicht einmal dieser Workaround scheint zu funktionieren. – chris

Nun, funktioniert nicht auch auf Lenovo alten Modellen. Alte Geräte sollten in Rente gehen. – stonyau

Leider sind einige Browser unterstützen nur nicht bestimmte HTML5 und CSS3-Eigenschaften. Mein Rat und der allgemeine Ratschlag, den Sie im Web finden, ist das Design Ihrer Site, so dass sie in allen Browsern funktioniert und gut aussieht. Gehen Sie dann zurück und fügen Sie CSS3- und HTML5-Elemente als Extra hinzu.

Dies ist ein gut gestaltet und ausgelegt table showing HTML5 and CSS3 support across browsers, zeigt es jedoch nicht die Unterstützung für mobile Browser.

This link, zeigt die Unterstützung für mobile Geräte.

Quelle

2013-07-31 15:15:55 samrap

Nach Ihrem eigenen Link (der zweite), sollten Android-Browser abgerundete Ecken unterstützen, so bin ich zurück zu fragen, ob es etwas ist, was ich gerade mache in diesem CSS, das es bricht. – HBlackorby

Ja, das ist wirklich seltsam. Ich habe noch nie in irgendeinem Browser ein Problem mit dem Grenzradius festgestellt. Aber dein Code sieht ganz gut aus. – samrap

Wenn es eine Schaltfläche ist, nehme ich an, Sie haben ein: Hover psuedo? Wenn Sie dies tun, versuchen Sie auch, den Grenzradius darauf einzustellen. Da es niedriger in der Kaskade ist, könnte es den Grenzradius auf den Standardwert überschreiben, der keiner ist. Nur ein Schuss in die Dunkelheit @HBlackorby – samrap

-1

Ich denke, Ihr Code ist nicht falsch, es ist nicht auf Tablet-Geräten durch do anzeigen kann. Hintergrund Grenze sollte diesen Fehler zu beheben haben Sie die Zeilen löschen sollten

background-color: #521c0b; 
color: #FFFFFF;

oder Löschen von Zeile

border: 3px solid red

Ich denke, dies ist kein Fehler, und ich habe eine Menge Arbeit, wie oben erfüllt :) p/s: sorry mein Englisch ist nicht sehr gut

Quelle

2014-01-21 07:53:36 user3213664

Die obige Antwort zum Teilen des CSS in einzelne Eigenschaften behebt das Problem. Es ist nichts falsch mit der Hintergrundfarbe oder regulären Rahmen CSS. – HBlackorby

Border-Radius funktioniert nicht in modernen nativen Android-Browser

Antwort

Verwandte Themen