background-size: cover non funziona su iOS

Questo è il mio codice:

background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center; 

È lavorare su desktop, iPad e Android mobile:

background-size: cover non funziona su iOS

Su Chrome e Safari su iPhone, lo sfondo è troppo grande:

background-size: cover non funziona su iOS

  • Il <div class="backdrop"></div> soluzione ha funzionato per me da Ryan e Rocco risposta. Tuttavia, invece di aggiungere position: absolute al CSS blocco, ho aggiunto questa riga qui sotto e ha funzionato grande: > min-height: 100vh;

 

5 Replies
  1. 53

    Questo succede quando si hanno background-attachment:fixed. Sul cellulare, io di solito mettere background-attachment:scroll all’interno di un @media query.

    Come @RyanKimber sottolineato, fissa le immagini allegate utilizzare tutto il <body> dimensioni. Su mobile, questo può ottenere davvero alti che soffia la vostra immagine. Impostazione dell’attacco posteriore per scroll permette l’immagine di copertina al tratto all’interno del proprio contenitore.

    • Quando si imposta il max-width non dimenticate di considerare il mobile dispositivo in orientamento orizzontale, altrimenti la media query non si innescherà quando nel paesaggio e avrai lo stesso problema.
    • Se vuoi una soluzione senza @media query, quindi vedere la mia risposta qui sotto con un semplice corpo:dopo regola CSS e html nodo: stackoverflow.com/a/43058483/7765675
  2. 47

    Elaborazione di Ryan risposta, senza aggiunta di nuove html nodo o utilizzando @media query, usando solo css.

    Se si desidera mantenere un cover dimensioni fixed di sfondo su tutti i dispositivi, tra cui iOS, senza l’aggiunta di un nuovo nodo, quindi il trucco è quello di fare la posizione fissa su un elemento (corpo) stesso e non sullo sfondo, uno sfondo fisso e coprire il dimensionamento scombina iOS.

    Funziona in produzione come un fascino su iOS così: https://www.doklist.com/

    Questo codice non funziona, dal momento che iOS utilizza l’altezza della document e non viewport:

    body {
          background: url(https://www.w3schools.com/css/trolltunga.jpg) no-repeat center center fixed;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
    }

    Ora questa è la magia, il body:after è fisso, e non lo sfondo:

    CSS:

    body:after{
          content:"";
          position:fixed; /* stretch a fixed position to the whole screen */
          top:0;
          height:100vh; /* fix for mobile browser address bar appearing disappearing */
          left:0;
          right:0;
          z-index:-1; /* needed to keep in the background */
          background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
    }

    Ho potuto usare il corpo stesso, con “position:fixed;overflow-y:scroll”, ma non ho voglia di pasticciare con il posizionamento del corpo e il mio layout complessivo.

    Così la corpo:dopo è una difficoltà molto facile. Ho testato la soluzione su Mac e iOS con firefox, safari, chrome.

    Ho anche creato un repo github con 2 esempi: https://github.com/thesved/fixed-cover-background

    • Sembra che il corpo:dopo{…} soluzione funziona perfettamente. Ho appena testato su browserstack. Ottima soluzione!
    • Dopo il tentativo di tonnellate di altre presunte soluzioni, questo funziona perfettamente sul desktop e mobile! Grazie Viktor!
    • Assicurarsi di aggiungere background-attachment:scroll per fastidiosi iphone sfondo di zoom-in e
    • L’esempio sulla vostra repo github non sembra di lavorare con la iOS12 simulatore di utilizzo di un iPad Pro nel paesaggio.
  3. 5

    Questo mi ha causato una serie di problemi. Il problema è che iOS è a piena altezza, & larghezza del corpo invece della finestra di decidere la dimensione.

    La nostra soluzione è stata quella di creare un nuovo <div class="backdrop"></div> .

    Si applica sfondo al div e dare position: absolute; top: 0; top: 0; left: 0; a destra: 0.

    Dal momento che questo div è ora la dimensione della finestra, background-size: cover funziona bene.

    • Questi valori di creare effettivamente un elemento la dimensione di tutto il corpo, e non la viewport, che ricrea il problema originale
  4. 0

    Questo post le risposte alle tue domande: perché CSS background-size: cover non funziona in modalità ritratto su iOS?

    Non tutti i browser riconoscono il coperchio parola chiave per background-size, e come risultato, semplicemente ignorarlo.

    Così siamo in grado di superare quel limite impostando il background-size di 100% larghezza o l’altezza, a seconda dell’orientamento. Siamo in grado di mirare l’orientamento corrente (così come il dispositivo iOS, utilizzando device-width). Con questi due punti penso che si può utilizzare CSS background-size:cover su iOS in modalità verticale

    Vedere che il post per ulteriori risorse.

  5. -3

    Provare questo:

    background: url( /gfx/background.jpg  ) no-repeat top center fixed; 
    background-size: 100vmax 100vmax;

    Come accennato prima, la “copertura” coperchio altezza, non vista di altezza. La maggior parte delle unità non funziona come dovrebbe, quindi, vmax.

    Non proprio coperchio, il lavoro con quadrato immagini 🙂

Lascia un commento