Superando as limitações do tamanho do plano de fundo: capa no Mobile Safari

Os dispositivos iOS apresentam um desafio único quando se trata de implementar imagens de plano de fundo que cubra elementos inteiros usando background-size: cover. Apesar do comportamento esperado, essa propriedade geralmente produz resultados indesejáveis ​​nessas plataformas.

Para resolver esse problema, surgiu uma solução alternativa inteligente. Ajustando a propriedade background-attachment para rolar em uma consulta de mídia direcionada especificamente a iPhones, o comportamento problemático pode ser corrigido.

Aqui está uma versão atualizada do código fornecido:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1,
#section2,
#section3 {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

Ao incluir esta consulta de mídia, a propriedade background-attachment é definida para rolar apenas para dispositivos com largura menor ou igual à variável predefinida @iphone-screen. Isso garante que as imagens de fundo se comportem conforme esperado em iPhones, mantendo sua posição fixa em telas maiores.

Esta solução fornece uma maneira simples e elegante de lidar com esse problema comum, permitindo criar imagens de fundo contínuas de largura total em todos os dispositivos, incluindo iOS.