SVG come immagine di confine sugli schermi retina

Si consideri che abbiamo un semplice file SVG, contenente il codice per il rettangolo arrotondato con raggio d’angolo uguale a 10:

   

Ecco come appare in Chrome:

Ora usiamo questa immagine come valore per la proprietà border-image in 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 retina, abbiamo un po ‘di merda totale: SVG sembra essere cresciuto due volte. Tutto ciò che vediamo è un angolo enorme.

Se sostituiamo questo SVG con un PNG simile, tutto va bene. Date un’occhiata (iOS 5.1 ha dipinto le parti interne degli elementi con il colore dell’immagine per qualche motivo, tuttavia, questo non è un argomento di questa domanda):

Dimostrazione dal vivo

La domanda è: può essere affrontato? Forse, ho sbagliato SVG? O ho bisogno di impostare il meta-tag viewport con alcune cose complicate per fermare il 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.

In secondo luogo, la meccanica e la syntax della proprietà border-image è abbastanza simile alla proprietà proprietaria -webkit-mask-box-image , che usa ancora l’unico modo per arrotondare gli angoli dei blocchi che contengono bambini posizionati in modo assoluto (ad esempio, Google Maps v3 può essere arrotondato in Chromi e Safaries solo attraverso di esso). 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 l’ border-image .

AGGIORNARE. Sembra che questo problema possa essere causato dal processore SVG aggiornato introdotto in iOS 6.0: su retina Le dimensioni SVG sono calcolate in pixel CSS, mentre le coordinate sono calcolate in quelle retina. Ci sono alcuni bug tracciati che hanno qualcosa di simile con il mio problema.

Dato il tuo aggiornamento sui bug di iOS6, questo approccio potrebbe funzionare:

    

Dimentica le immagini che puoi fare con semplici css

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

Supportato da iOS 3.2 … http://caniuse.com/border-radius

Se hai bisogno di un’immagine in modo che il bordo abbia un motivo, puoi semplicemente usare un’immagine di un formato web senza trasparenza e usare il raggio di confine su quello