Title: Ionic framework- Screen flickering in Android when entering the inputs
Tags: javascript;android;angularjs;ionic-framework
Question: HTML part
<ion-view  cache-view="false" view-title="" hide-nav-bar="true"&gt;
<ion-content class="padding input-center" style="background: url(img/background.jpg) center; background-size: cover;" ng-show="viewEntered"&gt;
<div class="row responsive-sm padding remvoeBP"&gt;
<div class="col"&gt;
<div class="app-logo"&gt;<img src="img/logo.png"&gt;</div&gt;
<div class="row"&gt;
<div class="col"&gt;
<div class="row"&gt;
<div class="col"&gt;
<label class="item item-input" ng-hide="showCity" style="background-color:transparent; border:none; border-bottom:1px solid white;"&gt;
<i class="icon ion-location placeholder-icon" style="color:black;"&gt;</i&gt;
<input type="text" placeholder="City" ng-change="searchCity(city_suggestion)" ng-model="city_suggestion"&gt;
</label&gt;
<label class="item item-input" ng-show="showCity" style="background-color:transparent; border:none; border-bottom:1px solid white;"&gt;
<i class="icon ion-location placeholder-icon" style="color:black;"&gt;</i&gt;
<input type="text" ng-click="changeCity()" ng-model="cityName"&gt;
</label&gt;
<div ng-show="cityList" class="list"&gt;
<li class="item" ng-click="selectedCity(city.city_id, city.name)" ng-repeat="city in searchCityList" &gt;{{city.name}}</li&gt;
<input type="hidden" name="cityId" ng-value="cityId"/&gt;
</div&gt;
</div&gt;
</div&gt;
<div class="row"&gt;
<div class="col" &gt;
<label class="item item-input" ng-hide="showArea" style="background-color:transparent; border:none; border-bottom:1px solid white;"&gt;
<i class="icon ion-android-navigate placeholder-icon" style="color:black;"&gt;</i&gt;
<input type="text" placeholder="Area" ng-change="searchArea(area_suggestion)" ng-model="area_suggestion"&gt;
</label&gt;
<label class="item item-input" ng-show="showArea" style="background-color:transparent; border:none; border-bottom:1px solid white;"&gt;
<i class="icon ion-android-navigate placeholder-icon" style="color:black;"&gt;</i&gt;
<input type="text" ng-click="changeArea()" ng-model="areaName"&gt;
</label&gt;
<div ng-show="areaList" class="list"&gt;
<li class="item" ng-click="selectedArea(area.area_id, area.name)" ng-repeat="area in searchAreaList"&gt;{{area.name}}</li&gt;
</div&gt;
</div&gt;
</div&gt;
<button class="button icon-left ion-android-search login-button-center" style="background-color:#AD1114;" ng-click="searchRestaurant(cityId,areaId)"&gt;
Search
</button&gt;
</div&gt;
</div&gt;
</div&gt;
</div&gt;
My controller code
angular.module('starter.locationControllers', [])
.controller('LocationCtrl', function($scope, $state, $http, $ionicPopup, baseUrl, $ionicLoading) {
$scope.$on("$ionicView.enter", function () {
$scope.viewEntered = true;
$scope.$on("$ionicView.beforeLeave", function () {
$scope.viewEntered = false;
$ionicLoading.show({
template:'<div class="loader"&gt;<svg class="circular"&gt;<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/&gt;</svg&gt;</div&gt;'
$http({
method : "POST",
url : baseUrl+"user_id="+localStorage.getItem('user_id')+"&amp;methodName=cart.clear"
}).then(function mySucces(response) {
$ionicLoading.hide();
$scope.cityList = false;
$scope.showCity = false;
$scope.city_suggestion = '';
$scope.cityId = '';
$scope.areaId = '';
$scope.searchCity = function(city_suggestion) {
$ionicLoading.show({
template:'<div class="loader"&gt;<svg class="circular"&gt;<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/&gt;</svg&gt;</div&gt;'
$http.get(baseUrl+'methodName=city.suggestion&amp;query='+city_suggestion, { cache: true}).then(function(response) {
$ionicLoading.hide();
$scope.cityList = true;
$scope.searchCityList = response.data.responseMsg;
$scope.selectedCity = function(cityId, cityName) {
$scope.showCity = true;
$scope.cityList = false;
$scope.cityName = cityName;
$scope.cityId = cityId;
$scope.changeCity = function() {
$scope.city_suggestion = {};
$scope.cityName = {};
$scope.showCity = false;
$scope.areaList = false;
$scope.showArea = false;
$scope.area_suggestion = '';
$scope.searchArea = function(area_suggestion) {
$ionicLoading.show({
template:'<div class="loader"&gt;<svg class="circular"&gt;<circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/&gt;</svg&gt;</div&gt;'
});
$http.get(baseUrl+'methodName=area.suggestion&amp;city_id='+$scope.cityId+'&amp;query='+area_suggestion, { cache: true}).then(function(response) {
$ionicLoading.hide();
$scope.areaList = true;
$scope.searchAreaList = response.data.responseMsg;
$scope.selectedArea = function(areaId, areaName) {
$scope.showArea = true;
$scope.areaList = false;
$scope.areaName = areaName;
$scope.areaId = areaId;
$scope.changeArea = function() {
$scope.area_suggestion = {};
$scope.areaName = {};
$scope.showArea = false;
$scope.searchRestaurant = function(cityId, areaId) {
if(cityId == '') {
var alertPopup = $ionicPopup.alert({
title: 'Dear User',
template: 'Please select city.'
});
return false;
if(areaId == '') {
var alertPopup = $ionicPopup.alert({
title: 'Dear User',
template: 'Please select area.'
});
return false;
window.localStorage.removeItem("cityId");
window.localStorage.removeItem("areaId");
localStorage.setItem('cityId', cityId);
localStorage.setItem('areaId', areaId);
$state.go('restaurantList', {cityId: cityId, areaId:areaId});
System information
Your system information:
ordova CLI: 6.4.0
Ionic CLI Version: 2.1.13
Ionic App Lib Version: 2.1.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v7.2.0
Xcode version: Not installed
My app screen flickers when giving input. I refer some links, but still i'm suffering from this problem. More detail please click https://www.youtube.com/watch?v=XGOrjMK6gmM&amp;feature=youtu.be here.


Here is another answer: A flickering screen could be due to authentication checking issue. For example, when you are logged out but your code still checks whether your data exists in the storage which in fact may exist.
On Chrome browser, I suggest that you go to More Tools -> Developer Tools -> Application. Then select your ionic storage and clear database.

Here is another answer: imports: [
BrowserModule,
IonicModule.forRoot(MyApp,{
scrollPadding: false,
scrollAssist: true,
autoFocusAssist: false
File: app.modules.ts

Here is another answer: Input elements must be inside form tag like
<form id="calcForm" name="calcForm"&gt;
...... Input fields......
</form&gt;
Also dont-leave view-title blank in ion-view.
Comment for this answer: In ion-view use like this        Content  .  Sometime caches may cause problem

Here is another answer: Add these two properties to prevent flickering effects:
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
Apply also to flickering elements which AREN'T being animated for the same fix.
Comment for this answer: add this code at flickering element's parent node. some time you may need to add it in child node also.
Comment for this answer: Thanks for the answer. Where i need to add these code.

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 4, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:12/20/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><android><angularjs><ionic-framework>', 'Title': 'Ionic framework- Screen flickering in Android when entering the inputs', 'ViewCount': 2393, 'id': 41236287, 'user_AboutMe': '', 'user_AccountId': 8516027.0, 'user_DisplayName': 'Santhosh K N', 'user_Reputation': 127.0, 'user_Views': 36.0, 'user_id': 6384422.0}}