Nuxt.js: render issue on mobile safari

[wushan]

Hi,
Thanks for the awesome work, I was playing around nuxt.js, although its still lack of documents, its still works nice.

I ran into this problem on iOS safari, not sure if it is a bug.

this is my layout default.vue

<template lang="pug">
#wrapper
  transition(name="fade", mode="out-in")
    #notify(v-if="notifyMessage")
      .restrict.notify-box {{notifyMessage}}
  my-header
  main#main
    nuxt
  my-footer
</template>

I tried on my OSX Sierra with chrome, firefox and safari, iphone 6 10.2 with Chrome, page renderer in the tag 'nuxt' without any problem. but when using the default safari on iOS, the header and footer still rendered, the 'nuxt' section will disapear.

Try here: https://notable.wushan.io/
Source: https://github.com/wushan/notable-frontend

Thank you.

_{This question is available on Nuxt.js community (#c107)}

[wushan]

finally figure out the problem but really wired.

form.controls(@submit.stop.prevent="startSearch", v-bind:class="{error: $v.number.$error}")
            input.phone-type(type="search", v-model.trim="number", v-bind:class="{active:number}", @input="$v.number.$touch()" @keyup="clearError")
            button(type="submit", @click="$v.$touch") 搜尋
            span ex:0978978078；市話：0228785487 - 不用自己輸入空格
            span.valid-notifier(v-if="!$v.number.required") (必填欄位)
            span.valid-notifier(v-if="!$v.number.minLength") (電話格式不正確！)
            span.valid-notifier(v-if="!$v.number.maxLength") (號碼有點多！)

after delete the line beside 'button', the 'span' tag which doesn't have an v-if condition, it prevents the bug.

[Atinux]

Hi @wushan

It's good that you find a way to fix it 👍

[PatrikLythell]

Hi guys, just wanted to shed some light on this since I think I ran into the same problem.

iOS Safari autorenders an anchor tag with href to phone number if it detects a phone number on the page. This cases a mismatch in the html between server rendered and Vue instance.

<span>074-444 44 44</span> automagically becomes <span><a href="tel:[phone]">074-444 44 44</a></span> in iOS Safari in iOS 10.

This unfortunately wipes the element in your HTML. With the html mismatch message.

Workaround is to render the anchor tag with the tel:number href in your html so you don't have a mismatch.

[robomatic]

I think this needs to be opened as a bug. If you have a phone number in a layout template, components will not render. Patrik's workaround is great for now, (thanks Patrik). It poses bigger issue for long term support, what if they want to manipulate the dom for addresses next?

[cesasol]

I stumbled upon this issue and maybe it can be documented in a common (or browser specific) problems section.

[ederchrono]

I stumbled into this problem and just wanted to add a short term solution.
Add this meta into the nuxt.config.js file

head: { 
  meta: [
    { 'name': 'format-detection', 'content': 'telephone=no' }
  ] 
}

and if you really need telephone number links, create them explicitly.

[elpete]

Not sure if I should open a new issue for this or not, but should the meta tag linked above be the default for a Nuxt app? It seems that excluding it will break any site with a phone number not wrapped in an anchor tag on iOS. Including it will just mean that users can't tap the phone number like they might expect. It seems that missing functionality is a better default than a broken site, especially when a developer can add in the anchor tag themselves.

(I'm happy to open another issue to propose this if that is better. Thanks.)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.