Vue: iOS Safari muestra una página en blanco

Aunque no puedo reproducir, esto aparentemente es un problema con la caché hacia atrás de Safari y no con Vue en sí.

¿Deberíamos cerrar esto entonces?
@ cherry-geqi La próxima vez, asegúrese de proporcionar una reproducción interactiva y una reproducción editable, como un jsfiddle 🙂 Realmente ayuda, incluso más con problemas móviles

Lo siento, pero no puedo proporcionar una reproducción jsfiddle, por lo que es posible que se necesiten algunos pasos más para reproducir. La esencia es mínima completa. Para reproducir, descargue la esencia y luego colóquela en el directorio raíz de un servidor temporal como python3 -m http.server y luego solicite desde iOS Safari.

En mi dispositivo, es casi un repositorio del 100%.

Aquí hay un screencast:
blank-page-repro.zip

Puede ser un problema con Safari, pero deberíamos proporcionar una solución alternativa, ¿verdad?

Creo que esto se debe a que ... estás recuperando los datos cada vez que navegas a casa. Debería utilizar una tienda para almacenar en caché los datos obtenidos.

Me temo que no. Tal vez no lo hice claro, pero en realidad es un problema fatal que solo repros en iOS Safari. Cuando navego hacia atrás, la página permanece en blanco hasta que interactúo con ella. Se cargan los datos y se construye el DOM. Es más como un error de renderizado del navegador, pero ¿hay algo que podamos hacer?

No se puede reproducir en iOS 10.3.1 con el código exacto que proporcionó.

Es una reproducción 100%. Desplácese por la página de la lista (¡importante!), Navegue hasta la página de detalles y navegue hacia atrás. He estado trabajando en esto durante al menos 20 horas.

¿Tu versión de iOS?

iOS 10.3.1 junto con Wechat 6.5.7, ya que cambió a WKWebview desde 6.5.6.

Deberías haber mencionado que Safari NO es WKWebView.

Repros en iOS Safari.

Si. Este es un problema que es 100% reproducible en ios （WeChat, Safari, al menos） para mi aplicación también. Vue 2.3.3.

@Centauro ¿Has encontrado una workaroud?

@ cherry-geqi agregué el siguiente código después de la búsqueda de datos:

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

Al menos nuestro equipo de pruebas quedó satisfecho.

sí, ¿resuelves este problema? @ cherry-geqi

@ppxialetsgo La solución alternativa proporcionada por @Centaur simplemente funciona. Obviamente, este no es un caso individual. Sugiero que el equipo de vuej preste más atención a esto. @ yyx990803 @posva

+1 Exactamente el mismo problema.

100% reproducido en iOS 9/10/11 + wechat (WKwebview) / safari. No se puede reproducir en UIWebview de wechat.

La solución anterior funciona para nosotros.

Estamos considerando Vue para nuestro nuevo proyecto, pero este hilo parece muy similar a lo que estoy viendo. Nuestros usuarios principales no tendrán los últimos teléfonos y veo que las aplicaciones de Vue de muestra simplemente no se procesan en IOS (7.1.2) Safari => IPHONE-4.

Reproducción:
La demostración de vue aquí no se procesa en IOS 7.1.2
https://lucasleandro1204.github.io/vue-content-loading

Pero el componente React equivalente sí lo hace:
https://danilowoz.github.io/react-content-loader/

Por favor avise.

Tengo el mismo problema

Tengo el mismo problema.

Tengo el mismo problema.

En realidad, es un problema relacionado con Safari en lugar de Vue, consulte esta demostración que no está relacionada con Vue.

¡Excelente! La demostración de @javoski indica que el problema no está relacionado con Vue sino con Safari.

@ Hao-Wu @javoski , no estoy de acuerdo contigo con la parte de Safari, probé con Google Chrome en mi Ipod touch y también hace lo mismo

@javoski . Dice en el inspector web que tienes un error como se muestra en la foto

Parece que el "tick" no se lee correctamente

Hola chicos, tuve el mismo problema, pero ahora resolví mi problema.
descubrí que mi problema se debía a la estructura del árbol dom

en mi caso, hay dos elementos HTML anidados.

Creo que es porque esto hace que el marco se renderice mal.

No sé si tuve exactamente el mismo problema, pero tuve un problema que suena bastante parecido a esto. La solución para mí fue instalar babel-polyfill . Entonces, para las personas futuras que busquen en Google este problema, esa podría ser una opción que ayude.

¡¡¡Gracias por tu solución @Centaur !!!
Me ahorraste horas de depuración ... Gracias hermano.

el mismo problema ocurre al reaccionar, si el elemento usa '-webkit-overflow-scrolling: touch', no se procesará al regresar en mi caso.

Entonces, ¿cómo resolver el problema finalmente, excepto el método de desplazamiento? También encuentro el problema al reaccionar ...
@ cherry-geqi @Centauro @posva

Aunque este problema está resuelto, todavía quiero decir que esto no es un problema de ios, sino un problema de vue. Si tienes que decir que es un problema de ios, entonces si hay un problema de Android, ¿no es un problema de vue? Entonces, ¿quién más usará vue?
tienes cinco

El problema aún existe en Safari iOS 12.

La corrección de

Aunque este problema está resuelto, todavía quiero decir que esto no es un problema de ios, sino un problema de vue. Si tienes que decir que es un problema de ios, entonces si hay un problema de Android, ¿no es un problema de vue? ¿Quién más usará vue?
Tienes cinco años

¿Eres sjb?

Se puede utilizar en vue

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

# Mi problema es…

Vue en ios safari, cuando la derecha se deslice de nuevo a home page , la página estará en blanco, luego mostrará el contenido de la página anterior, finalmente viene el contenido de home page ；

Además: No es solo volver al home page que tiene este problema, este fenómeno también existe en otras páginas;

# como lo solucioné

Abandona el Vue Transition ， emmm 太难 了