Vue: iOS Safari는 빈 페이지를 렌더링합니다.

재현할 수는 없지만 이것은 분명히 Vue 자체가 아니라 Safari의 역방향 캐시 문제입니다.

그럼 이걸 닫아야 할까요?
@cherry-geqi 다음에는 jsfiddle과 같은 대화형 재현 및 편집 가능한 재현을 제공해야 합니다. 🙂 모바일 문제에 훨씬 더 도움이 됩니다.

죄송하지만 jsfiddle 재현을 제공할 수 없으므로 재현하려면 몇 단계가 더 필요할 수 있습니다. 요지는 최소한의 완전한 것입니다. 재현하려면 요지를 다운로드한 다음 python3 -m http.server 와 같은 임시 서버의 루트 디렉터리에 넣은 다음 iOS Safari에서 요청합니다.

내 장치에서는 거의 100% repo입니다.

다음은 스크린캐스트입니다.
공백 페이지 repro.zip

Safari의 문제일 수 있지만 해결 방법을 제공해야 합니까?

나는 이것이 실제로... 집으로 이동할 때마다 데이터를 다시 가져오기 때문이라고 생각합니다. 가져온 데이터를 캐시하려면 저장소를 사용해야 합니다.

난 두려워하지. 아마도 내가 명확히하지 않았지만 iOS Safari에서만 재현되는 치명적인 문제입니다. 뒤로 탐색하면 페이지와 상호 작용할 때까지 페이지가 비어 있습니다. 데이터가 로드되고 DOM이 구성됩니다. 브라우저 렌더링 버그와 비슷하지만 우리가 할 수 있는 일이 있습니까?

제공한 정확한 코드를 사용하여 iOS 10.3.1에서 재현할 수 없습니다.

100% 재현입니다. 목록 페이지(중요!)를 스크롤하고 세부 정보 페이지로 이동한 다음 뒤로 이동합니다. 나는 적어도 20시간 동안 이 일을 해왔다.

당신의 iOS 버전은?

iOS 10.3.1은 Wechat 6.5.7과 함께 6.5.6부터 WKWebview로 전환되었습니다.

Safari는 WKWebView가 아닙니다.

iOS Safari의 재현.

예. 이것은 제 앱의 ios(적어도 WeChat, Safari 등)에서 100% 재현 가능한 문제입니다. 뷰 2.3.3.

@Centaur 해결 방법을 찾았습니까?

@cherry-geqi 데이터 가져오기 후에 다음 코드를 추가했습니다.

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

적어도 우리 테스트 팀은 만족했습니다.

예, 이 문제를 해결합니까? @cherry-geqi

@Centaur 단지 작품을 제공하는 해결 방법을 @ppxialetsgo. 이것은 분명히 개별적인 경우가 아닙니다. 나는 vuejs 팀이 이것에 더 많은 관심을 기울일 것을 제안합니다. @yyx990803 @posva

+1 정확히 같은 문제입니다.

iOS 9/10/11 + wechat(WKwebview)/safari에서 100% 재생산. wechat의 UIWebview에서 재현할 수 없습니다.

위의 해결 방법이 효과적입니다.

우리는 새로운 프로젝트에 Vue를 고려하고 있지만 이 스레드는 내가 보고 있는 것과 매우 유사해 보입니다. 우리의 주요 사용자는 최신 전화를 사용하지 않을 것이며 샘플 Vue 앱은 단순히 IOS(7.1.2) Safari => IPHONE-4에서 렌더링되지 않는다는 것을 알았습니다.

생식:
여기의 vue 데모는 IOS 7.1.2에서 렌더링되지 않습니다.
https://lucasleandro1204.github.io/vue-content-loading

그러나 동등한 React 구성 요소는 다음을 수행합니다.
https://danilowoz.github.io/react-content-loader/

조언 부탁드립니다.

나도 같은 문제를 안고있어

나도 같은 문제를 안고있어.

나도 같은 문제를 안고있어.

실제로 Vue 대신 Safari와 관련된 문제입니다. Vue와 관련이 없는 이 데모 를 확인하세요.

엄청난! @javoski 의 데모는 문제가 Vue가 아니라 Safari와 관련이 있음을 나타냅니다.

@Hao-Wu @javoski , Safari 부분에 동의하지 않습니다. Ipod touch에서 Google Chrome으로 시도했지만 동일하게 렌더링됩니다.

@자보스키 . 웹 검사기에서 사진과 같이 오류가 있다고 말합니다.

"틱"이 제대로 읽히지 않은 것 같습니다.

얘들 아, 나도 같은 문제가 있었지만 이제 내 문제를 해결했습니다.
나는 내 문제가 돔 트리의 구조 때문이라는 것을 알았습니다.

제 경우에는 두 개의 중첩된 HTML 요소가 있습니다.

이것은 프레임 렌더링을 잘못 만들기 때문이라고 생각합니다.

정확히 같은 문제가 있었는지 모르겠지만 이것에 꽤 가까운 문제가 있었습니다. 나를 위한 해결책은 babel-polyfill 를 설치하는 것입니다. 따라서 미래의 사람들을 위해 이 문제를 인터넷 검색하면 도움이 될 수 있습니다.

@Centaur 해결 방법에 감사드립니다 !!!
디버깅 시간을 절약했습니다... 감사합니다.

요소가 '-webkit-overflow-scrolling: touch'를 사용하면 반응에서도 동일한 문제가 발생합니다. 제 경우에는 반환 시 렌더링되지 않습니다.

그래서 스크롤 방법을 제외하고 마지막으로 문제를 해결하는 방법은 무엇입니까? 나는 또한 반응에 문제가 발생합니다 ...
@cherry-geqi @Centaur @posva

이 문제는 해결됐지만 그래도 이건 ios 문제가 아니라 vue 문제라고 말씀드리고 싶은데 ios 문제라고 해야 한다면 안드로이드 문제가 있다면 vue 문제 아닌가요? 그럼 누가 vue를 사용할까요?
당신은 다섯

이 문제는 Safari iOS 12에 여전히 존재합니다.

@Centaur 수정이 작동했습니다. 기본 스크롤 요소만 찾으면 됩니다. 제 경우에는 body 요소 내부의 div였습니다.

이 문제는 해결됐지만 그래도 이건 ios 문제가 아니라 vue 문제라고 말씀드리고 싶은데 ios 문제라고 해야 한다면 안드로이드 문제가 있다면 vue 문제 아닌가요? 누가 vue를 사용할까요?
당신은 다섯 살입니다

당신은 sjb입니까?

뷰에서 사용할 수 있습니다.

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

# 내 문제는…

Vue in ios safari , 오른쪽 슬라이드를 home page 되돌리면 페이지가 비어 있게 됩니다 ， 그런 다음 이전 페이지의 내용을 표시하고 마침내 home page ；

추가: 이 문제는 home page 에만 있는 것이 아닙니다. 이 현상은 다른 페이지에도 존재합니다.

# 어떻게 해결했어

Vue Transition 포기 ， emmm 太难了