SVG come border-immagine su schermi retina

Question

perche non abbiamo semplice file in formato SVG, che contiene il codice per il rettangolo arrotondato che raggio d'angolo uguale a 10:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> 
    <rect fill="#FACE8D" x="0" y="0" width="100" height="100" rx="10" ry="10" /> 
</svg> 

Ecco come appare come in Chrome:

Ora usiamo questa immagine come valore per border-image proprietà nei CSS:

.box { 
    @include border-image(url('rounded-rectangle.svg') 10); 
    border-width: 10px; 
    background: #FFF; 
    width: 50px; 
    height: 50px; 
} 

Ora diamo un'occhiata a come appare in diversi browser e dispositivi: brillante, l'immagine si estende sui confini dell'elemento come previsto.

Tuttavia, quando finiamo di vedere quelli sui dispositivi con schermi retina, abbiamo un po 'di merda totale: SVG sembra essere cresciuto due volte. Tutto ciò che vediamo è un angolo enorme.

Se sostituiamo tale SVG con un PNG simile, tutto va bene. Date un'occhiata (iOS 5.1 dipinse le parti interne di elementi con l'immagine a colori, per qualche ragione, tuttavia, questo non è un argomento di questa domanda):

Live demo

La domanda è: : può essere affrontato? Forse, ho sbagliato SVG? O ho bisogno di impostare il meta-tag viewport con alcune cose complicate per fermare border-image dal ridimensionamento?

Il problema è abbastanza importante. Innanzi tutto, SVG è popolare soprattutto a causa delle retine. È lo strumento per decorare le cose senza preoccuparsi che sembrerebbero schifose pixel sovrapposti.

secondo luogo, la meccanica e la sintassi della proprietà border-image è molto simile alla struttura proprietaria -webkit-mask-box-image, usando che è ancora l'unico modo per arrotondare gli angoli di blocchi contenenti bambini posizionati in modo assoluto (ad esempio, Google Maps v3 può essere arrotondato in Chromes and Safaries solo attraverso di essa). E questa proprietà è molto preziosa nello sviluppo mobile con componenti Web, quando è necessario impostare qualche contorno difficile a un elemento dell'interfaccia utente. Purtroppo, da questa proprietà raddoppia le dimensioni SVG proprio come border-image.

AGGIORNAMENTO. Sembra che questo problema possa essere causato da updated SVG processor introdotto in iOS 6.0: su retina Le dimensioni SVG sono calcolate in pixel CSS, mentre le coordinate sono calcolate in quelle a retina. Ci sono somebugs monitorati che hanno qualcosa di simile al mio problema.

Answer 1

dato il vostro aggiornamento di insetti iOS6, questo approccio potrebbe funzionare:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> 
    <rect fill="#FACE8D" x="0" y="0" width="100%" height="100%" rx="10%" ry="10%" /> 
</svg> 

Answer 2

Dimenticate le immagini si può fare questo con un semplice css

.box { 
    border: 10px solid #FACE8D; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    background: #FFF; 
    width: 50px; 
    height: 50px; 
} 

supportati dal iOS 3.2 ...http://caniuse.com/border-radius

Se avete bisogno di un'immagine in modo che il confine per avere un modello, si può semplicemente utilizzare un'immagine di formato web senza trasparenza e utilizzare border-radius su quel