Comments 28
Я правильно понял, что ваше решение ломает «кликабельность» имеющихся на страничке номеров телефонов? Или вы их делаете кликабельными самостоятельно, и «искуственный интеллект» вам не нужен?
Надо поэкспериментировать, пока под рукой нет подходящего девайса. Вообще, от «бизнеса» не было задачи делать телефоны кликабельными.
По идее, если ссылки сами по себе уже содержат указание на кликабельность телефона, вряд ли сафари будет в это дело вмешиваться. Другое вопрос, это, как бы, вообще не его дело, кликабельны телефоны или нет. Хочешь сделать такой функционал, решай вопрос на уровне DOM-свойств и событий, зачем подменять html?
По идее, если ссылки сами по себе уже содержат указание на кликабельность телефона, вряд ли сафари будет в это дело вмешиваться. Другое вопрос, это, как бы, вообще не его дело, кликабельны телефоны или нет. Хочешь сделать такой функционал, решай вопрос на уровне DOM-свойств и событий, зачем подменять html?
Погодите. Как, где и зачем Safari подменяет html? Если я правильно понял, оно его просто парсит чуть иначе, чем «гидратация» — т.е. отличия именно на уровне DOM. Вроде в пределах допустимого (более того: аналогичный пример прописан в руководстве по данной вами ссылке).
Но решение vue.js, конечно, феерическое: сделать обход этой ситуации в дебаге — это додуматься надо. Всю жизнь принято делать в дебаге assert — чтобы fail fast и всё такое, а если уж делается обход для кривого случая — в релизе он 100% обязан использоваться. Дебаг может (и должен) упасть раньше релиза, но не упасть там, где релиз сломается — большой косяк.
Но решение vue.js, конечно, феерическое: сделать обход этой ситуации в дебаге — это додуматься надо. Всю жизнь принято делать в дебаге assert — чтобы fail fast и всё такое, а если уж делается обход для кривого случая — в релизе он 100% обязан использоваться. Дебаг может (и должен) упасть раньше релиза, но не упасть там, где релиз сломается — большой косяк.
т.е. отличия именно на уровне DOM
ну как… у нас есть dom-узел, у него есть свойства, которые появляются при парсинке html-разметки. То есть, в разметке мы прописываем тегу атрибуты (attributes), которые в итоге отражаются в свойства (properties) dom-узла. Если нам надо навесить обработчик события на какой-то элемент, в данном случае номер телефона, то нам надо работать именно с dom-элементом. Я об этом.
Сафари поступает иначе. Он получает html. Во вкладке Network видно, какой был ответ от сервера. Затем меняет текстовую ноду с телефоном на ссылку с href=«tel: тра-та-та» затем парсит это в dom-ноду с соответствующими свойствами. То есть, можно было бы (если я нигде не ошибся) повесить обработчик на эту ноду на уровне dom-properties не меняя состава dom-дерева. Тут, я правда, не уверен, при сравнении во время гидратации, не будет ли расхождением разные свойства этой самой ноды…
Ну так пример с tbody — ровно то же самое. Не было никакого tbody в html, но браузер его втыкает, потому что считает, что так будет лучше =).
Очень плохо иметь два независимых парсера html.
А насчёт расхождения при гидратации — возможно, и это будет ещё фееричнее: дебаг и релиз будут просто работать на разном DOM.
Очень плохо иметь два независимых парсера html.
А насчёт расхождения при гидратации — возможно, и это будет ещё фееричнее: дебаг и релиз будут просто работать на разном DOM.
Так телефоны надо через href=«tel:» делать вроде.
UFO just landed and posted this here
А завтра они решат адреса в ссылки на карте превращать. Что тогда делать?
Думаю, спасет.
Мы тоже недавно наткнулись на необходимость использования этого метатега — при отображении статистики некоторые цифры превращались в кликабельные телефонные номера.
UPD. Кстати, сейчас задумался. Никогда такой необходимости не возникало, но все же. А что делать, если нужно, чтобы сафари поменял запись на кликабельный номер, и при этом не упало само приложение на стадии гидратации. Сходу на ум приходит только забить на элемент и не трогать его совсем.
Мы тоже недавно наткнулись на необходимость использования этого метатега — при отображении статистики некоторые цифры превращались в кликабельные телефонные номера.
UPD. Кстати, сейчас задумался. Никогда такой необходимости не возникало, но все же. А что делать, если нужно, чтобы сафари поменял запись на кликабельный номер, и при этом не упало само приложение на стадии гидратации. Сходу на ум приходит только забить на элемент и не трогать его совсем.
На мой взгляд, в текущей реализации этого функционала в Сафари, это вряд ли возможно. Он меняет дом, меняет атрибуты, создает новые ноды в дереве. При таком раскладе гидратация невозможна.
Ну либо эту часть сайта генерить только на клиенте, чтобы сервер вообще не знал о наличии телефонов
Ну либо эту часть сайта генерить только на клиенте, чтобы сервер вообще не знал о наличии телефонов
Очевидно, в такой ситуации нужно превратить его в кликабельный номер самостоятельно.
А как насчет <a href="tel:88001112333">8 (800) 111 2 333</a>?
В документации прямо так и написано:
Но вообще если apple так делает, то, вероятно, надо завести issue, чтобы vue изменил это поведение (не падал, а перерендерил компонент просто).
В режиме разработки Vue будет проверять, что виртуальное дерево DOM, сгенерированное на стороне клиента, совпадает с структурой DOM созданной на сервере. При нахождении несоответствия, он будет считать гидратацию неудачной, отказываться от существующего DOM и рендерить всё с нуля. В режиме production, эта проверка отключена для достижения максимальной производительности.
Но вообще если apple так делает, то, вероятно, надо завести issue, чтобы vue изменил это поведение (не падал, а перерендерил компонент просто).
Зашел только чтобы поругать за «желтушность» заголовка. Давайте хабр не будет превращаться в стандартные желтые издания, которые привлекают аудиторию не значимым контекстом, а заманчивым заголовком.
«И вы не поверите, что мы увидели»
«Когда он открыл дверь, он не поверил своим глазам»
«Чтобы никогда не иметь проблем с потенцией надо всего лишь купить ...»
Тьфу, расстроился.
«И вы не поверите, что мы увидели»
«Когда он открыл дверь, он не поверил своим глазам»
«Чтобы никогда не иметь проблем с потенцией надо всего лишь купить ...»
Тьфу, расстроился.
То что вы описали это ошибка Vue. Гидратация должна всегда быть failsafe. Safai конечно тоже молодец что без спроса меняет DOM, но такие вещи не должны ломать всё приложение.
Sign up to leave a comment.
Vue.js SSR & мобильный Safari: неочевидная проблема со слишком умным ПО