Ионные Каркасно экран мерцает в Android при входе входы

Question

HTML часть

<ion-view cache-view="false" view-title="" hide-nav-bar="true"> 
<ion-content class="padding input-center" style="background: url(img/background.jpg) center; background-size: cover;" ng-show="viewEntered"> 
<div class="row responsive-sm padding remvoeBP"> 
    <div class="col"> 
    <div class="app-logo"><img src="img/logo.png"></div> 

    <div class="row"> 
     <div class="col"> 
     <div class="row"> 
      <div class="col"> 
      <label class="item item-input" ng-hide="showCity" style="background-color:transparent; border:none; border-bottom:1px solid white;"> 
       <i class="icon ion-location placeholder-icon" style="color:black;"></i> 
       <input type="text" placeholder="City" ng-change="searchCity(city_suggestion)" ng-model="city_suggestion"> 
      </label> 

      <label class="item item-input" ng-show="showCity" style="background-color:transparent; border:none; border-bottom:1px solid white;"> 
       <i class="icon ion-location placeholder-icon" style="color:black;"></i> 
       <input type="text" ng-click="changeCity()" ng-model="cityName"> 
      </label> 

      <div ng-show="cityList" class="list"> 
       <li class="item" ng-click="selectedCity(city.city_id, city.name)" ng-repeat="city in searchCityList" >{{city.name}}</li> 
       <input type="hidden" name="cityId" ng-value="cityId"/> 
      </div> 

      </div> 
     </div> 

     <div class="row"> 
      <div class="col" > 
      <label class="item item-input" ng-hide="showArea" style="background-color:transparent; border:none; border-bottom:1px solid white;">  
       <i class="icon ion-android-navigate placeholder-icon" style="color:black;"></i> 
       <input type="text" placeholder="Area" ng-change="searchArea(area_suggestion)" ng-model="area_suggestion"> 
      </label> 

      <label class="item item-input" ng-show="showArea" style="background-color:transparent; border:none; border-bottom:1px solid white;"> 
       <i class="icon ion-android-navigate placeholder-icon" style="color:black;"></i> 
      <input type="text" ng-click="changeArea()" ng-model="areaName"> 
      </label> 

      <div ng-show="areaList" class="list"> 
      <li class="item" ng-click="selectedArea(area.area_id, area.name)" ng-repeat="area in searchAreaList">{{area.name}}</li> 
      </div> 

      </div> 
     </div> 

     <button class="button icon-left ion-android-search login-button-center" style="background-color:#AD1114;" ng-click="searchRestaurant(cityId,areaId)"> 
      Search 
     </button> 

     </div> 
    </div> 
    </div> 
</div> 

Мой код контроллера

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"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>' 
    }); 

    $http({ 
method : "POST", 
url : baseUrl+"user_id="+localStorage.getItem('user_id')+"&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"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>' 
    }); 

    $http.get(baseUrl+'methodName=city.suggestion&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"><svg class="circular"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/></svg></div>' 
    }); 

    $http.get(baseUrl+'methodName=area.suggestion&city_id='+$scope.cityId+'&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}); 
} 

}); 

}); 

Системная информация

Ваша система информации:

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 

Мое приложение экрана мерцает при подаче ввода. Я ссылаюсь на некоторые ссылки, но все же я страдаю от этой проблемы. Более подробно, пожалуйста, нажмите https://www.youtube.com/watch?v=XGOrjMK6gmM&feature=youtu.be здесь.

Answer 1

Входные элементы должны быть внутри форме тега, как

<form id="calcForm" name="calcForm"> 
    ...... Input fields...... 
</form> 

Также DonT-оставить представление-заголовок пустой в ионном виде.

Answer 2

Добавьте эти два свойства, чтобы предотвратить эффект мерцания:

-webkit-transform-style: preserve-3d; 
-webkit-backface-visibility: hidden; 

Применяют также мелькая элементы, которые не анимируемого для того же исправить.