routes.js don't show login page on Ipad with IOS 10.3.3

happymax

Hi all,
sorry for the question I know that version 10.3.3 is out of date but i would like to know if other Quasar Users have encountered this problem.

In the routes.js of my SPA application I have these commands and everything works fine on Windows, Android, but on Ipad with IOS 10.3.3 the login page is never displayed.

const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/login.vue'),
        meta: { requiresAuth: false }
      },
      {
        path: '/login',
        component: () => import('pages/login.vue'),
        meta: { requiresAuth: false }
      },
      {
        path: '/index',
        component: () => import('pages/InitPage.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: '/customer',
        component: () => import('pages/Customer.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: '/order',
        component: () => import('pages/Order.vue'),
        meta: { requiresAuth: true }
      },
      {
        path: '/orderlist',
        component: () => import('pages/Orderlist.vue'),
        meta: { requiresAuth: true }
      }
    ]
  }
]

When I access the application I am unable to perform any operation and it seems that it is waiting for the login and psw but the page displays the menu on the left (that run correctly) but in the center the request form is not displayed.

Please note that to avoid problems on this Ipad I use the last version of Edge browser.

Thanks

dobbel

@happymax

Please note that to avoid problems on this Ipad I use the last version of Edge browser.

So does that mean you have NO problems with Edge on an Ipad?

If so does that mean Safari does have these problems?

happymax

@dobbel
No I have these problems with Edge too.

I have wrote that Edge is updated to the latest version only because for Chrome and Safari there are no longer updates for this version of Ios while Edge continues to be updated.

Thank you for your answer.

dobbel

@happymax

what happens if you create a new quasar app from CLI (with ie11 support). And run that on edge/chrome/safari/firefox on your Ipad.

So no other code just the generated app in SPA mode. ( don’t forget the IE 11 support)

happymax

@dobbel

I’ve created the new app and when I run it on Ipad the text of the first page is aligned on the left but is visible.

However I’ve noticed that there are some difference when I build the app - the new app sends these msgs during the build process

Configured browser support (at least 89.01% of global marketshare):
 · Chrome for Android >= 87
 · Firefox for Android >= 83
 · Android >= 81
 · Chrome >= 77
 · Edge >= 84
 · Firefox >= 75
 · IE >= 11
 · iOS >= 10.3
 · Opera >= 68
 · Safari >= 11

 App · Reading quasar.conf.js
 App · Transpiling JS (Babel active) - includes IE11 support
 App · Extending SPA Webpack config
 App · Cleaned build artifact: "C:\weborder\ex\test\dist\spa"
 App · Generating Webpack entry point
 App · Compiling with Webpack...

but my app send only these and I think thet the problem is the differrences into the quasar.conf.js so the IE11 support is not activated

App · Reading quasar.conf.js
App · Generating legacy js code (ES5); use "--modern" param for ES6+
App · Extending SPA Webpack config
App · Cleaned build artifact: "C:\weborder\weborderapp\dist\spa"
App · Generating Webpack entry point
App · Compiling with Webpack...

Into each pakake.json files I have these browser list configuration

"browserslist": [
   "ie >= 11",
   "last 10 Chrome versions",
   "last 10 Firefox versions",
   "last 4 Edge versions",
   "last 7 Safari versions",
   "last 8 Android versions",
   "last 8 ChromeAndroid versions",
   "last 8 FirefoxAndroid versions",
   "last 10 iOS versions",
   "last 5 Opera versions"
 ],

dobbel

@happymax

Try to look for more differences:

diff package.json ( for example quasar packages versions 2x or 3x )
diff quasar.conf

I would first do a quasar info on both to see the most important diff

happymax

@dobbel

I created a new app and then copied all my pages, store, etc from my app to the new app but on Ipad I have the same problem.

However even if Quasar is update to the new version, the complie messages differs between the app.

Old app

Build mode........ spa
Pkg quasar........ v1.14.7
Pkg @quasar/app... v1.9.6
Debugging......... no
Publishing........ no
Modern build...... no (legacy ES5); use "--modern" param for ES6+

NewApp

Build mode........ spa
Pkg quasar........ v1.14.7
Pkg @quasar/app... v2.1.13
Debugging......... no
Publishing........ no
Transpiled JS..... yes (Babel) - includes IE11 support

Do you know why ?

Thanks

beets

@happymax The quasar app is upgraded in between old app and new app. You may want to see this upgrade guide: https://quasar.dev/quasar-cli/app-upgrade-guide

As far as the actual problem, I’m not sure exactly. It would help if you can use Chrome and grab a console log: https://blog.chromium.org/2019/03/debugging-websites-in-chrome-for-ios.html

happymax

@beets Thank you for the tips.

No More Posting New Topics!

routes.js don't show login page on Ipad with IOS 10.3.3