Vue: iOS Safari renderiza página em branco

Mesmo que eu não possa reproduzir, isso aparentemente é um problema com o cache de back-forward do Safari e não com o próprio Vue.

Devemos encerrar isso então?
@ cherry-geqi Da próxima vez, certifique-se de fornecer uma reprodução interativa e uma reprodução editável, como um jsfiddle 🙂 Isso realmente ajuda, ainda mais com problemas de celular

Sinto muito, mas não posso fornecer uma reprodução do jsfiddle, portanto, podem ser necessárias mais algumas etapas para a reprodução. A essência é no mínimo completa. Para reproduzir, baixe a essência e coloque-a no diretório raiz de um servidor temporário como python3 -m http.server e solicite do iOS Safari.

No meu aparelho, é quase 100% repo.

Aqui está um screencast:
blank-page-repro.zip

Pode ser um problema com o Safari, mas devemos fornecer uma solução alternativa, certo?

Acho que na verdade é porque ... você recupera os dados toda vez que navega para a página inicial. Você deve usar um armazenamento para armazenar em cache os dados buscados.

Receio que não. Talvez eu não tenha sido claro, mas é realmente um problema fatal que só repros no iOS Safari. Quando navego de volta, a página fica em branco até interagir com ela. Os dados são carregados e o DOM é construído. É mais como um bug de renderização do navegador, mas há algo que podemos fazer?

Não é possível reproduzir no iOS 10.3.1 usando o código exato que você forneceu.

É uma reprodução 100%. Role a página da lista (importante!) E navegue até a página de detalhes e volte para trás. Estou trabalhando nisso há pelo menos 20 horas.

Sua versão iOS?

iOS 10.3.1 junto com Wechat 6.5.7, pois mudou para WKWebview desde 6.5.6.

Você deveria ter mencionado isso - Safari NÃO é WKWebView.

Repros no iOS Safari.

sim. Esse é um problema 100% reproduzível no ios （WeChat, Safari, pelo menos） no meu aplicativo também. Vue 2.3.3.

@Centaur Você encontrou uma workaroud?

@ cherry-geqi Eu adicionei o seguinte código após a busca de dados:

this.$nextTick(() => {
      window.scrollTo(0, 1)
      window.scrollTo(0, 0)
})

Pelo menos nossa equipe de teste ficou satisfeita.

sim, você resolve esse problema? @ cherry-geqi

@ppxialetsgo A solução alternativa fornecida por @Centaur simplesmente funciona. Obviamente, este não é um caso individual. Eu sugiro que a equipe vuejs preste mais atenção nisso. @ yyx990803 @posva

1 Exatamente o mesmo problema.

100% reproduzido em iOS 9/10/11 + wechat (WKwebview) / safari. Não é possível reproduzir no UIWebview do wechat.

A solução alternativa acima funciona para nós.

Estamos considerando o Vue para nosso novo projeto, mas este tópico parece muito semelhante ao que estou vendo. Nossos usuários principais não terão os telefones mais recentes e vejo que os aplicativos de amostra do Vue simplesmente não são renderizados no IOS (7.1.2) Safari => IPHONE-4.

Reprodução:
A demonstração vue aqui não é renderizada no IOS 7.1.2
https://lucasleandro1204.github.io/vue-content-loading

Mas o componente React equivalente:
https://danilowoz.github.io/react-content-loader/

Por favor informar.

Eu tenho o mesmo problema

Eu tenho o mesmo problema.

Eu tenho o mesmo problema.

Na verdade, é um problema relacionado ao Safari em vez do Vue, verifique esta demonstração que não envolve o Vue.

Excelente! A demonstração de @javoski indica que o problema não está relacionado ao Vue, mas ao Safari.

@ Hao-Wu @javoski , discordo de você com a parte do Safari, tentei com o Google Chrome no meu Ipod touch e também renderiza o mesmo

@javoski . Diz no inspetor da web que você tem um erro conforme mostrado na foto

Parece que o "tique" não foi lido corretamente

Ei pessoal, eu tive o mesmo problema.mas agora resolvi meu problema.
Eu descobri que meu problema era devido à estrutura da árvore dom

no meu caso, existem dois elementos HTML aninhados.

Acho que é porque isso faz com que o quadro seja renderizado de forma errada.

Não sei se tive exatamente o mesmo problema, mas tive um problema que parece muito próximo disso. A solução para mim foi instalar babel-polyfill . Então, para as pessoas futuras que pesquisam sobre esse assunto no Google, essa pode ser uma opção que ajuda.

Obrigado pela sua solução alternativa @Centaur !!!
Você me salvou horas de depuração ... Obrigado mano.

o mesmo problema acontece na reação, se o elemento usar '-webkit-overflow-scrolling: touch', ele não será renderizado no retorno no meu caso.

então, como resolver o problema finalmente, exceto o método de rolagem? Também encontro o problema ao reagir ...
@ cherry-geqi @Centaur @posva

Embora este problema esteja resolvido, ainda quero dizer que este não é um problema iOS, mas um problema real. Se você tiver que dizer que é um problema iOS, então se houver um problema Android, não é um problema real? Então, quem mais usará o vue?
você tem cinco

O problema ainda existe no Safari iOS 12.

@Centaur fix funcionou, você só precisa encontrar o elemento de rolagem principal. No meu caso, foi um div dentro do elemento do corpo.

Embora este problema esteja resolvido, ainda quero dizer que este não é um problema iOS, mas um problema real. Se você tiver que dizer que é um problema iOS, então se houver um problema Android, não é um problema real? Quem mais usará o vue?
Voce tem cinco anos

Você é sjb?

Pode ser usado em vue

scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
   return {y: 0}
  }

# meu problema é ...

Vue in ios safari, Quando o slide certo voltar para home page , a página ficará em branco ， Em seguida, mostre o conteúdo da página anterior ， finalmente vem o conteúdo de home page ；

Além disso: não é apenas o home page que tem esse problema, esse fenômeno também existe em outras páginas;

# como eu resolvi isso

Abandone o Vue Transition ， emmm 太难 了