border-radius non funziona nel browser Android nativo moderno

Ho una pagina che utilizza il raggio di confine. Non viene visualizzato arrotondato nel browser Android nativo; si presenta con angoli quadrati. Si presenta arrotondato in Chrome desktop, IE, FF, ecc bene, ma non nel browser del telefono nativo. Qualcuno sa se questo è un problema con il browser stesso, qualche estensione CSS aggiuntiva che non sto usando, ecc.?border-radius non funziona nel browser Android nativo moderno

Ecco la mia CSS (nella 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; 
}

ho creato un JSFiddle: http://jsfiddle.net/VJvQA/

ho provato con imbottitura, senza imbottitura, con box-sizing, senza box- dimensionamento, e si presenta solo come spigoli vivi. Qualsiasi aiuto o intuizione sarebbe apprezzato.

Mi rendo conto che qualcuno ha postato questo già sotto (border-radius style doesn't work in android browser), ma non ha fornito alcun codice, JSFiddle, ed è stato risposto in modo errato con una domanda generale senza alcuna risposta reale; Avrei votato meno se potessi, ma immaginavo che produrre una domanda ben scritta sarebbe stata meglio. Grazie!

fonte

2013-07-31 HBlackorby

L'ho provato su Android su Galaxy S4 Active, quindi il browser nativo Android più moderno in circolazione. – HBlackorby

Diversi browser supportano diverse funzionalità HTML5 e CSS3, è solo una parte dello sviluppo web. – Robadob

E mi andrebbe bene, ma secondo http://caniuse.com/border-radius, dovrebbe funzionare nei browser Android, quindi sto provando a vedere se si tratta di un bug in questa implementazione del browser, o se c'è del conflitto nel mio CSS o di come è scritto il mio CSS che sta causando il problema. – HBlackorby

Risulta, questo problema è specifico del browser Android su Galaxy S4 e S4 Active. Sembra che abbiano rotto il supporto per la proprietà del raggio di confine condensato, ma se si specifica ogni angolo singolarmente, funziona correttamente. Sto postando un bug report su Android. Quindi, se si esegue questa operazione:

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

Funziona correttamente; se hai appena un raggio di confine: 10px; viene ignorato.

Questa è stata risposta sotto questo post: Galaxy S4 stock browser CSS3 border-radius support? Sto solo ripetendo qui. Ma ho testato la loro soluzione e ora funziona perfettamente anche sul Galaxy S4 Active.

fonte

2013-07-31 16:00:54 HBlackorby

I grattini con la tua persistenza, è una strana incoerenza. – Robadob

Sto utilizzando Cyanogenmod 11 su S4 e nemmeno questa soluzione sembra funzionare. – chris

Bene, non funziona anche sui vecchi modelli Lenovo. I vecchi dispositivi dovrebbero andare in pensione. – stonyau

Sfortunatamente, alcuni browser non supportano alcune proprietà HTML5 e CSS3. Il mio consiglio e i consigli generali che troverai sul Web sono la progettazione del tuo sito in modo che funzioni e sia gradevole su tutti i browser, quindi torni indietro e aggiunga elementi CSS3 e HTML5 come extra.

Questo è un ben progettato e strutturato table showing HTML5 and CSS3 support across browsers, ma non mostra il supporto per i browser mobili.

This link, mostra il supporto per i dispositivi mobili.

fonte

2013-07-31 15:15:55 samrap

Secondo il proprio link (il secondo), i browser Android dovrebbero supportare gli angoli arrotondati, quindi sono tornato a chiedermi se è qualcosa che sto facendo specificamente in quel CSS che lo infrange. – HBlackorby

Sì, è davvero strano. Non ho mai incontrato un problema con il raggio di confine in nessun browser. Ma il tuo codice sembra completamente a posto. – samrap

Se si tratta di un pulsante, suppongo che tu abbia un: hover psuedo? Se lo fai, prova a impostare anche il raggio del bordo. Dal momento che è più basso nella cascata potrebbe sovrascrivere il raggio di confine con il valore predefinito che non è nessuno. Solo un colpo al buio @HBlackorby – samrap

-1

Penso che il tuo codice non sia sbagliato, non può essere visualizzato sui dispositivi tablet da fare. background bordo dovrebbe avere a correggere questo errore è necessario eliminare le righe

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

o l'eliminazione di fila

border: 3px solid red

credo che questo non è un bug e ho incontrato un sacco di lavoro come sopra :) p/s: scusate il mio inglese non è molto buono

fonte

2014-01-21 07:53:36 user3213664

La risposta precedente sulla suddivisione del CSS in singole proprietà risolve il problema. Non c'è niente di sbagliato con il colore di sfondo o il normale bordo CSS. – HBlackorby

border-radius non funziona nel browser Android nativo moderno

risposta

Problemi correlati