Problema di altezza SVG viewbox su ios Safari

Question

Ho notato una cosa strana su iOS quando si utilizza svg. Lo svgs sembra funzionare bene in tutti gli altri browser, ma su Safari ipad/iphone la viewbox ha uno spazio strano nella parte superiore e inferiore dello svg. Qualcun altro ha trovato questo e sei stato in grado di risolverlo? Usando un po 'di semplice codice SVG come ad esempio:

<svg width="100%" viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" /> 
</svg> 

su iPad/iPhone se ho messo un bordo sul svg ci strano spazio sopra e sotto la svg ... ??

La bacchetta sembra normale sul desktop ma se la guardi su un ipad ecc. Vedrai i problemi.

http://jsfiddle.net/InVAMPED/hck5gg1a/

Answer 1

Il problema è che si sta impostando solo la larghezza, non altezza della casella di layout SVG. La viewBox viene quindi adattata all'interno di questa finestra di layout utilizzando l'impostazione predefinita xMidYMid meet, che la ridimensiona solo per adattarla alla dimensione più limitata e la centra nella direzione opposta.

Firefox e le ultime versioni di Chrome (e credo anche Safari desktop) ridimensioneranno l'SVG in modo che corrisponda allo aspect ratio viewBox quando lasci una dimensione come auto. Tuttavia, altri browser applicheranno un'altezza/larghezza predefinita e ridimensioneranno l'immagine per adattarla:

• IE applica la larghezza 150px altezza/300px che è l'impostazione predefinita per gli oggetti incorporati.
• Safari mobile deve applicare il vecchio webkit predefinito di 100vh (l'altezza della finestra del browser).

Non è proprio un "bug" nei browser, solo una funzionalità che non è mai stata chiaramente definita nelle specifiche.

Ricerca informazioni sul "rapporto di spaziatura inferiore del rapporto aspetto" per un modo di forzare il browser a rispettare un rapporto aspetto lasciando comunque che la larghezza sia reattiva.

Answer 2

AmeliaBR ha perfettamente ragione, un grande ringraziamento per avermi condotto nella giusta direzione!

Ecco quello che Google mi ha mostrato: The padding-bottom hack

Poiché un valore percentuale per padding-bottom ottiene è l'altezza dalla larghezza dell'elemento e non l'altezza in sé possiamo sfruttare questo per creare gli elementi sensibili senza un'altezza specificata.

sul contenitore SVG:

.container { 
    padding-bottom: 70%; /*this is your height/width ratio*/ 
    height: 0; 
    } 

Sull'elemento SVG stesso:

.container svg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
} 

Answer 3

Per me, impostare la larghezza e l'altezza al 100% per tutti i SVG ha fatto il trucco:

svg { 
    width: 100%; 
    height: 100%; 
} 

Si sente molto più pulito rispetto all'imbottitura.

Answer 4

questo ha funzionato per me:

.mapContainer svg{ max-height: 60vw; *This will depend on the aspect ratio* }

è necessario impostare il max-height (in unità di VW) in modo che la svg è entro certi limiti. Quindi si adatta bene ovunque. Si noti che l'altezza massima sarà diversa per i diversi SVG, a seconda delle proporzioni.