background-size: cover no funciona en iOS

Este es mi código:

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; 

Está funcionando en computadoras de escritorio, iPad y dispositivos mobilees con Android:

trabajando

En Chrome y Safari en iPhone, el background es demasiado grande:

demasiado grande

Esto sucede cuando tiene background-attachment:fixed . En dispositivos mobilees, suelo poner background-attachment:scroll dentro de una consulta @media .

Como lo señaló @RyanKimber , las imágenes adjuntas fijas usan todo el tamaño <body> . En dispositivos mobilees, esto puede llegar a ser muy alto, lo que hace volar tu image. Si vuelve a scroll el file adjunto para scroll la image de su portada se estirará dentro de su propio contenedor.

Elaborando la respuesta de Ryan, sin agregar ningún nodo html nuevo ni usar consultas @media , usando solo un css .

Si desea mantener un background fixed tamaño de cover en todos los dispositivos, incluido iOS, sin agregar un nuevo nodo, el truco consiste en hacer el posicionamiento fijo en el elemento (cuerpo) en sí mismo y no en el background, ya que un background fijo y una cubierta El tamaño desordera iOS.

Funciona en producción como un encanto en iOS también: https://www.doklist.com/

Este código no funcionará, ya que iOS utiliza la altura del document y no la 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; } 

Ahora esta es la magia, el body:after se arregla, y no el background :

 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; } 

Esto me causó una serie de problemas también. El problema es que iOS usa el ancho y la altura completos del cuerpo en lugar de la window gráfica para decidir el tamaño.

Nuestra solución fue crear una nueva <div class="backdrop"></div> .

Aplicamos el background a este div y le damos una position: absoluta; arriba: 0; background: 0; izquierda: 0; derecha: 0

Como este div es ahora del tamaño de la window gráfica, background-size: cover funciona bien.

Esta publicación responde a sus preguntas: ¿por qué CSS background-size: cover no funciona en modo vertical en iOS?

No todos los browseres reconocen la palabra key cover para tamaño de background y, como resultado, simplemente lo ignoran.

Por lo tanto, podemos superar esa limitación estableciendo el tamaño de background a 100% de ancho o alto, dependiendo de la orientación. Podemos orientar la orientación actual (así como el dispositivo iOS, usando el ancho del dispositivo). Con estos dos puntos creo que puedes usar el tamaño de background de CSS: cubrir iOS en modo vertical

Ver esa publicación para más resources.