Quasar: [ios] Delay in tabs

[xereda]

Delay in tabs with ios safari.

There is too long a delay to access the tabs in the Safari iOS browser.

I made two gifs to illustrate this.

Safari in MAC OS X: http://g.recordit.co/G7xMI60fV8.gif (working...)

Safari in Iphone 5 (iOS 10): http://g.recordit.co/fWhj3cYC6E.gif (not working...)

I believe we have some inconsistency in that.

Regards,

[rstoenescu]

Will investigate. Thanks for reporting!

[rstoenescu]

Not Quasar's fault, but a workaround is needed. Referencing https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios#scrolling--unusable-positionfixed-element

[xereda]

Where specifically do I apply this fix? Or will you add this to the standard product?

[rstoenescu]

That's not a fix. It's just an acknowledgment of a few well known bugs in ios safari browser (the new IE in my opinion).

[xereda]

I agree ... thanks for the help.

[yeegeek]

First, I want to say this is an awesome framework, this is the framework I've been looking for.

I also come across this problem when I tried to learn this framework, I looked into it, I found this is actually a very small problem.

If you look into the file in the framework > the tab component, file : src/vue-components/tab/Tab.vue

<router-link v-if="route" ref="routerLink" :to="route" :replace="replace" :append="append" :exact="exact"></router-link>
<i v-if="icon" class="q-tabs-icon">{{icon}}</i>

if you could just move the icon into the <router-link></router-link>,like this:

<router-link v-if="route" ref="routerLink" :to="route" :replace="replace" :append="append" :exact="exact">
<i v-if="icon" class="q-tabs-icon">{{icon}}</i>
</router-link>

it would solve the touch delay ( or touch not responding) problem, well, the problem still exists as you must tap on the icon for the router to jump, if you tap on somewhere else not near the icon, it may not, so a perfect fix would put the whole tab content in the <router-link> element?

Thank you for the awesome work.

[rstoenescu]

@yeegeek Will investigate, thanks! Tabs component is a beast. It must work without routes attached to it so it's a little complicated, but will get this done.