Pergunta do WordPress Twenty Twenty: Twenty Twenty: Recurso de modelo de capa de imagem de paralaxe não funciona no iOS

Um usuário perguntou 👇

Olá a todos,

Adoro o tema Twenty Twenty, mas o recurso Image Template Cover/Image Hover não funciona em dispositivos iOS (iPhone 6S e iPad Pro 10.5” e ambos estão executando o iOS 13.3). A imagem é ampliada ao máximo. Vinte e sete anos parecem ter o mesmo erro.

Isso corrige o problema, mas corrige a imagem dessa maneira.

@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {
  .cover-header.bg-attachment-fixed {
    background-attachment: scroll;
  }
}

Eu acidentalmente encontrei esse comportamento usando o iPad de um amigo. Como este é um problema global, peço aos desenvolvedores que corrijam isso, de acordo com o código acima e uma nota no tópico ou na documentação de correção real. Outros desenvolvedores parecem ter conseguido corrigir a rolagem de imagens parallax em dispositivos iOS. Mas isso não deve passar despercebido pelos usuários.

Muito obrigado

(@tungstênio2)

Há 1 ano

(@tungstênio2)

Há 1 ano

(@tungstênio2)

Há 1 ano

Bilhete Verificado:

(@jarrett)

Há 1 ano

Olá, aqui está um bilhete de pista para a versão oficial do tema:

Vejo que você criou um problema no Github com Automattic, mas eles não lidariam com uma versão .org do tema.

(@raqai)

Há 1 ano

Este é um problema geral na maioria dos dispositivos iOS e é conhecido há anos. A capa de plano de fundo se comporta de maneira diferente no iOS. Ele usa a altura do corpo em vez da altura do contêiner, o que pode resultar em uma altura do corpo muito alta em dispositivos móveis ou tablets, alongando bastante o fundo.

Este é um problema de combinação de background-size: cover; e background-attachment: fixed;.

Confira esta postagem de fluxo:

Você pode usar um div dentro de um div e deixar o segundo div conter uma imagem e um position:fixed mas, como resultado, esse div não reconheceria o conteúdo e, portanto, só pode usar uma capa na página que tornaria a imagem de fundo do cabeçalho para você escrever. Javascript sozinho seria uma solução que ajuda aqui.

Resumindo: Se você quiser usar várias capas de paralaxe no iOS sem adicionar código irracional -> você não pode.

Como a recomendação geral desencoraja o uso de efeitos de paralaxe em dispositivos móveis, pois requer muitos cálculos e faria perguntas sobre CPUs móveis “menores”, sugiro que você reconsidere suas escolhas de design se elas permanecerem. Use um efeito de paralaxe nas telas.

Eu uso o seguinte código (considerando desenvolvimento mobile first) em minhas páginas. Esta é basicamente uma solução semelhante ao que você já tem em vez de pensar no desenvolvimento mobile first. Normalmente, você deve contornar esse problema excluindo os efeitos de paralaxe em telas menores.


.bg-attachment-fixed, .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
    background-attachment: scroll;
}
@media (min-width: 1000px) {
    .bg-attachment-fixed, .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
        background-attachment: fixed;
    }
}

Esta resposta foi modificada há 1 ano por. Esta resposta foi modificada há 1 ano por.

(@tungstênio2)

Há 1 ano

obrigado pela resposta.

Meu ponto é que, se este é um bug conhecido há muito tempo, isso deve ser tratado diretamente no tema e não por todos os usuários que o encontrarem. Todo mundo assumiria que um tema em 2020 deveria funcionar perfeitamente com todos os navegadores populares, incluindo iOS. Ou me engano?

(@raqai)

Há 1 ano

Este não é um bug relacionado ao tema, mas um bug dentro da implementação. background-size: cover; e background-attachment: fixed; dentro do navegador, o que significa que você provavelmente deve confiar na Apple/Google para corrigir isso, não no criador do tema.

Mas sim, talvez o CSS acima deva ser implementado dentro do tema para comentar porque isso não é paralaxe em um celular (como você mencionou acima).

Esta resposta foi modificada há 1 ano por.

(@tungstênio2)

Há 1 ano

Porque não temos chance de a Apple consertar isso, mas o tema, o tema deve lidar com isso. Qual é a melhor maneira de aderir a isso?

(@tungstênio2)

Há 1 ano

@raqai sua configuração funciona apenas para o seu iPhone, mas não para o seu iPad. Vou voltar para as configurações que postei anteriormente.

(@raqai)

Há 1 ano

@raqai sua configuração funciona apenas para o seu iPhone, mas não para o seu iPad. Vou voltar para as configurações que postei anteriormente.

Eu provavelmente perdi o problema de mídia para o seu iPad. Eu não tenho um aqui para testá-lo corretamente. Obrigado pela informação 🙂

Porque não temos chance de a Apple consertar isso, mas o tema, o tema deve lidar com isso. Qual é a melhor maneira de aderir a isso?

Dependendo do que você quer dizer com “o assunto deve lidar”.

Se você pretende não usar um plano de fundo fixo e ignorar a paralaxe no celular: Definitivamente sim. Isso pode ser feito com o CSS acima e deve ser adicionado ao tema por padrão.

Se você pretende implementar paralaxe em dispositivos móveis: Não, o tema não deve lidar com isso. Esta é uma questão técnica. Todas as “soluções” atualmente disponíveis resultariam em uma quantidade significativa de sobrecarga e afetariam negativamente o desempenho do seu site.

Esta resposta foi modificada há 1 ano por.

(@tungstênio2)

Há 1 ano

sim, quero dizer a opção 1 que você mencionou. Defina um plano de fundo e ignore a paralaxe se não for compatível com determinados mecanismos do navegador.

(@tungstênio2)

Há 1 ano

Eu também não tenho um iPhone ou um iPad. Eu tive que pedir a um amigo para tentar para mim…. 🙁

(@tungstênio2)

Há 1 ano

@raqai como abordar isso para adicionar o tema padrão? Os desenvolvedores de temas estão lendo aqui? Onde criar um ticket para isso?

fixed background and ignore parallax on iOS devices (iPhone, iPad)

Esta resposta foi modificada há 1 ano por.

(@tungstênio2)

Há 1 ano

ninguém?

(@tungstênio2)

Há 1 ano

hein, alguém está lendo aqui?

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *