Ion-slides no longer slidable on mobile sizes after update to Ionic 5.1.0

@sanz wrote:

Hi everyone

Built an app with Ionic 5 / Angular 9.1 but had an issue with slides working erratically as per this issue. Seemed like Ivy was the issue so I disabled Ivy (“enableIvy”: false in tsconfig.app.json) which allowed the sliders to work correctly without issues again.

The fix was merged and was part of the recent 5.1.0 update. I updated my app expecting the issue to be resolved, however a different issue has presented itself

I can now enable Ivy fine, however ALL sliders using ion-slides no longer work (can’t swipe to slide forward or backward), BUT only when in Developer Tools and using the various device sizes ie. Galaxy S5 etc. If “Toggle device toolbar” is NOT enabled (ie full screen web browser), swiping works fine.

An exception to this is if I hit refresh when on a page with a slider, the sliders then work from that point on.

It’s like on initial load, the slider is not initialised. I have used a mixture of basic sliders and sliders with options.

Ionic Info:

Ionic:

   Ionic CLI                     : 6.8.0 (/Users/scott/.npm-packages/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.901.4
   @angular-devkit/schematics    : 9.1.4
   @angular/cli                  : 9.1.4
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.1.0
   @capacitor/core : 2.1.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.0 (/usr/local/Cellar/node/12.9.1/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

package.json:

{
	"name": "name",
	"version": "0.1",
	"author": "Sanz",
	"homepage": "https://homepage",
	"scripts": {
		"ng": "ng",
		"start": "ng serve",
		"build": "ng build",
		"test": "ng test",
		"lint": "ng lint",
		"e2e": "ng e2e"
	},
	"private": true,
	"dependencies": {
		"@angular/common": "^9.1.5",
		"@angular/core": "^9.1.5",
		"@angular/fire": "^6.0.0",
		"@angular/forms": "^9.1.5",
		"@angular/platform-browser": "^9.1.5",
		"@angular/platform-browser-dynamic": "^9.1.5",
		"@angular/pwa": "^0.901.4",
		"@angular/router": "^9.1.5",
		"@angular/service-worker": "^9.1.5",
		"@capacitor/android": "^2.1.0",
		"@capacitor/core": "^2.1.0",
		"@capacitor/ios": "^2.1.0",
		"@egjs/view360": "^3.3.1",
		"@ionic/angular": "^5.1.0",
		"@ionic/cli": "^6.8.0",
		"@ionic/core": "^5.1.0",
		"@ionic/pwa-elements": "^1.5.2",
		"@ngneat/cashew": "^1.1.5",
		"@ngx-pwa/offline": "^9.1.0",
		"core-js": "^2.5.4",
		"firebase": "^7.14.3",
		"ngx-ionic-image-viewer": "^0.7.0",
		"rxjs": "^6.5.5",
		"tslib": "^1.11.2",
		"zone.js": "~0.10.2"
	},
	"devDependencies": {
		"@angular-devkit/architect": "~0.900",
		"@angular-devkit/build-angular": "^0.901.4",
		"@angular/cli": "^9.1.4",
		"@angular/compiler": "^9.1.5",
		"@angular/compiler-cli": "^9.1.5",
		"@angular/language-service": "^9.1.5",
		"@capacitor/cli": "^2.1.0",
		"@ionic/angular-toolkit": "^2.1.1",
		"@types/jasmine": "~3.3.8",
		"@types/jasminewd2": "~2.0.3",
		"@types/node": "^12.12.38",
		"codelyzer": "^5.1.2",
		"firebase-tools": "^7.12.1",
		"fuzzy": "^0.1.3",
		"inquirer": "^6.5.2",
		"inquirer-autocomplete-prompt": "^1.0.1",
		"jasmine-core": "~3.4.0",
		"jasmine-spec-reporter": "~4.2.1",
		"karma": "~4.1.0",
		"karma-chrome-launcher": "~2.2.0",
		"karma-coverage-istanbul-reporter": "~2.0.1",
		"karma-jasmine": "~2.0.1",
		"karma-jasmine-html-reporter": "^1.4.0",
		"protractor": "^5.4.4",
		"ts-node": "~7.0.0",
		"tslint": "~5.15.0",
		"typescript": "~3.8.3"
	},
	"description": "Description"
}

I have rebuilt the project (npm install), cleared caches etc.

Anyone come across this or have any idea I can try?

Thanks
Sanz

Posts: 1

Participants: 1

Read full topic