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

Hi everyone :slight_smile:

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 :frowning:

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?

I created a basic test deployed to Firebase hosting that can be viewed at https://slide-test-7c23a.web.app/welcome

It appears on a mobile device everything works as it should, however in a browser (my app is a PWA) slides still don’t work when testing at device sizes ie Galaxy S5 etc. Very odd indead.

Thanks
Sanz