ionic-framework: List are really slow to scroll on iOS / iPad 2

@jackyy415 We use a script hook to remove those CSS lines. We use after_prepare because it will be ran after run, build etc… Here is how we did:

In your config.xml

<hook src="scripts/clean-ios-css.js" type="after_prepare" />

Our clean-ios-css.js code looks like:

const fs = require('fs');
const tasks = [{
  file: 'platforms/ios/www/build/main.css',
  toRemove: ':active,:focus{outline:0}'
}, {
  file: 'platforms/ios/www/build/main.css',
  toRemove: `:focus,
:active {
  outline: none;
}`
}, {
  file: 'www/build/main.css',
  toRemove: `:focus,
:active {
  outline: none;
}`
}];

function clean() {
  console.log('clean-ios-css: Cleaning starts');
  tasks.forEach(task => {
    if (!fs.existsSync(task.file)) {
      return;
    }
    const data = fs.readFileSync(task.file, 'utf8');
    const result = '/* cleaned by clean-ios-css hook */' + data.replace(new RegExp(task.toRemove, 'g'), '');
    fs.writeFileSync(task.file, result, 'utf8');
  });
  console.log('clean-ios-css: Cleaning done');
}

module.exports = function(context) {
  const deferral = context.requireCordovaModule('q').defer();
  clean();

  setTimeout(() => {
    deferral.resolve();
  }, 0);

  return deferral.promise;
}

I think it should be fixed by this replacement:

:focus, input:active, textarea:active, select:active, button:active, a:active { outline: none; }

My temporary fix: ionic-fixes.js

/*

	This script fixes performance issue on ios platfrom causing by ionic style:

	:focus,
	:active {
	  outline: none;
	}

	which causes huge style recalculations each touch start and touch end event on device causing bad performance of an app

	this script replace the rule by more adequate rule:

	:focus, input:active, textarea:active, select:active, button:active, a:active { outline: none; }

	this fix is actual until this issue remains opened:
	https://github.com/ionic-team/ionic/issues/13526
	related issue:
	https://github.com/ionic-team/ionic/issues/12733

*/



let path = require('path')
let fs = require('fs')

let filePath = path.resolve( __dirname, '../www/build/main.css')
// let filePath = path.resolve( __dirname, '../node_modules/ionic-angular/themes/util.scss')
let fileContent = fs.readFileSync( filePath, {
	encoding: 'utf8'
} )

fileContent = fileContent.replace(/:focus,\n:active {\n  outline: none;\n}/, ':focus, input:active, textarea:active, select:active, button:active, a:active { outline: none; }')
						 .replace(/:active,:focus{outline:0}/, ':focus,input:active,textarea:active,select:active,button:active,a:active{outline:0}') // minified version

fs.writeFileSync( filePath, fileContent )

console.log('ionic-fix applied')

and in package.json

  "scripts": {
    "ionic:build:after": "node ./build-hooks/ionic-fixes.js",
  }

@kevinmerckx Thanks a lot. We have tried and it works.

Thank you so much @kevinmerckx @luckylooke this resolved my issues, I wish I came across this solution earlier but you both saved me additional hours of racking my brain. Kudos!

@luckylooke I just wanted to add my heart felt thanks for your research and resolution. After a significant development period, my app was unusable under iOS 10. Your fix solved it. Thank-you.

This is a major bug. The consequences of which are significant for any reasonably sized app targeting iOS. The Ionic team really should push this out as a fix to v3 asap. I simply can’t understand why they would leave this issue out there for everyone starting a new project for the last four months!

To leave on a happy note though, @luckylooke, you rock!

thanks @luckylooke @kevinmerckx it turns out when I pasted the script above into a file it had an extra return before the .replace for the minified version so it was not working, but now it is.

Relieved that this makes iOS usable! Hoping that the Ionic team will incorporate it is asap so others dont struggle with this.

+1

I also encountered this issue. It seems to be causing excessive recalculating styles which is causing the slowdown to occur. All of my virtual scroll items were causing major FPS loss when interacted with and removing the aforementioned CSS rule resolved my issue. I am using an iPad Air 2.

I took your code and applied the WKWebView Engine, which helps but does not completely solve the issue. I suggest using that and also implementing Virtual Scroll so you are not rendering so much data at one time.