Ion-slides don't move well at first time after ionic serve [Ionic 5 + Angular 10]

Ionic Framework Ionic Angular
1

Hi,

I’m using <ion-slides> in a template and when I start ther server with ionic serve at first time I try to play with the slides and move the first slide to the left, it dosen’t work. Never change to next slide because it is blocked.

This behaivour can you see it in the next gif:
Works bad

But when I have running the server of ionic and refresh the browser, then <ion-slides> works well and Ican go to the next or back slide without problems.

As you can see in the next gif:
Works well

Can anybody give me a solution? Or tell me if is a issue it only appears in develop environment?

Thank folks!

PD: These are my dependencies:

"dependencies": {
    "@angular/common": "~10.0.0",
    "@angular/core": "~10.0.0",
    "@angular/forms": "~10.0.0",
    "@angular/platform-browser": "~10.0.0",
    "@angular/platform-browser-dynamic": "~10.0.0",
    "@angular/router": "~10.0.0",
    "@fullcalendar/angular": "^5.4.0",
    "@fullcalendar/daygrid": "^5.4.0",
    "@fullcalendar/interaction": "^5.4.0",
    "@fullcalendar/list": "^5.4.0",
    "@fullcalendar/timegrid": "^5.4.0",
    "@ionic-native/camera": "^5.29.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/file": "^5.29.0",
    "@ionic-native/file-transfer": "^5.29.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "cordova-android": "9.0.0",
    "moment": "^2.29.1",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1002.0",
    "@angular/cli": "~10.0.5",
    "@angular/compiler": "~10.0.0",
    "@angular/compiler-cli": "~10.0.0",
    "@angular/language-service": "~10.0.0",
    "@ionic/angular-toolkit": "^2.3.0",
    "@ionic/lab": "3.2.9",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "cordova-plugin-camera": "^5.0.1",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
2

I often get this when I have opened up the inspector view in Chrome or Edge and have toggled the mobile device simulator button.

Refreshing the page after toggling always fixes it, so it’s not an Ionic bug, don’t worry about it.

1 Like
3

Thanks @Daveshirman ! It’s true if I don’t open the inspector it works well and also if I open the inspector with the desktop simulator option works well. Only happens when I choose the mobile device simulator.

Thanks because I thought this was a problem with Ionic.

However If anyone have a solution to avoid this issue I will be very greatful.