Vue: iOS Safari отображает пустую страницу

Несмотря на то, что я не могу воспроизвести, это, по-видимому, проблема с обратным кешем Safari, а не с самим Vue.

Должны ли мы тогда закрыть это?
@ cherry-geqi В следующий раз обязательно предоставьте интерактивное воспроизведение и редактируемое воспроизведение, например jsfiddle 🙂 Это действительно помогает, даже больше с мобильными проблемами

Извините, но я не могу предоставить репро jsfiddle, поэтому для воспроизведения может потребоваться еще несколько шагов. Суть минимально полная. Чтобы воспроизвести, загрузите суть и затем поместите его в корневой каталог временного сервера, например python3 -m http.server а затем запросите из iOS Safari.

В моем аппарате это почти 100% репо.

Вот скринкаст:
blank-page-repro.zip

Это может быть проблема с Safari, но мы должны предоставить обходной путь, не так ли?

Я думаю, это потому, что ... вы повторно загружаете данные каждый раз, когда идете домой. Вы должны использовать хранилище для кеширования полученных данных.

Я не боюсь. Возможно, я не ясно выразился, но это действительно фатальная проблема, которая воспроизводится только в iOS Safari. Когда я возвращаюсь назад, страница остается пустой до тех пор, пока не начну с ней взаимодействовать. Данные загружаются и строится модель DOM. Это больше похоже на ошибку рендеринга браузера, но что мы можем сделать?

Невозможно воспроизвести на iOS 10.3.1 с использованием точного кода, который вы предоставили.

Это 100% репро. Прокрутите страницу списка (важно!), Перейдите на страницу с подробностями и вернитесь назад. Я работал над этим не менее 20 часов.

Ваша версия iOS?

iOS 10.3.1 вместе с Wechat 6.5.7, поскольку он перешел на WKWebview с 6.5.6.

Вы должны были упомянуть об этом - Safari НЕ является WKWebView.

Репродукции на iOS Safari.

да. Это проблема, которая на 100% воспроизводится на ios (WeChat, Safari, по крайней мере) для моего приложения. Vue 2.3.3.

@Centaur Вы нашли обходной путь?

@ cherry-geqi Я добавил следующий код после получения данных:

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

По крайней мере, наша тестовая команда осталась довольна.

да, вы решите эту проблему? @ Cherry-Geqi

@ppxialetsgo Обходной путь, предоставляемый @Centaur, просто работает. Очевидно, это не индивидуальный случай. Предлагаю команде vuejs уделить этому больше внимания. @ yyx990803 @posva

+1 Точно такая же проблема.

100% воспроизведено на iOS 9/10/11 + wechat (WKwebview) / safari. Невозможно воспроизвести в UIWebview WeChat.

Вышеупомянутый обходной путь работает для нас.

Мы рассматриваем 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/

Пожалуйста, порекомендуйте.

У меня точно такая же проблема

У меня точно такая же проблема.

У меня точно такая же проблема.

На самом деле это проблема, связанная с Safari, а не с Vue, посмотрите эту демонстрацию, которая не связана с Vue.

Большой! Демо @javoski указывает, что проблема связана не с Vue, а с Safari.

@ Hao-Wu @javoski , я не согласен с вами в части Safari, я пробовал использовать Google Chrome на своем Ipod Touch, и он также отображает то же самое

@javoski . В веб-инспекторе говорится, что у вас есть ошибка, как показано на фото.

Похоже, "галочка" читается некорректно

Привет, ребята, у меня была такая же проблема, но теперь я решил свою проблему.
я обнаружил, что моя проблема была связана со структурой дерева dom

в моем случае есть два вложенных элемента HTML.

Я думаю, это потому, что это неправильно отрисовывает кадр.

Я не знаю, была ли у меня такая же проблема, но у меня была проблема, которая звучит довольно близко к этой. Решением для меня было установить babel-polyfill . Итак, для будущих людей, которые ищут эту проблему в Google, это может оказаться полезным вариантом.

Спасибо за обходной путь @Centaur !!!
Вы сэкономили мне часы на отладку ... Спасибо, братан.

та же проблема возникает при реакции, если элемент использует '-webkit-overflow-scrolling: touch', в моем случае он не будет отображаться при возврате.

Итак, как окончательно решить проблему, кроме метода прокрутки? Я также сталкиваюсь с проблемой реагирования ...
@ cherry-geqi @Centaur @posva

Хотя эта проблема решена, я все же хочу сказать, что это не проблема ios, а проблема vue. Если вы должны сказать, что это проблема ios, то, если есть проблема Android, это не проблема vue? Так кто еще будет использовать vue?
тебе пять

Проблема все еще существует в Safari iOS 12.

Исправление @Centaur сработало, вам просто нужно найти основной элемент прокрутки. В моем случае это был элемент div внутри тела.

Хотя эта проблема решена, я все же хочу сказать, что это не проблема ios, а проблема vue. Если вы должны сказать, что это проблема ios, то, если есть проблема Android, это не проблема vue? Кто еще будет использовать vue?
Тебе пять лет

Вы sjb?

Может использоваться в vue

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

# моя проблема ...

Vue в ios safari, когда правый слайд вернется к home page , страница будет пустой ， Затем покажите содержимое предыдущей страницы ，, наконец, появится содержимое home page ；

Вдобавок: эта проблема возникает не только из-за home page ， это явление также существует на других страницах;

# как я решил это

Отказаться от Vue Transition ， эммм 太难 了