Sometime Tap/Click not Responding In Android 4.1.2


#1

Hi,

I try to build my apps using command ionic start command, but strange, because sometime when i click or tap, app seems not responding, sometime its need double click to change the page, and sometime its not work even tap how many times.

So i try to run basic ionic starter that come originally when we run ionic start and still the problem exists.

Also with $ionicPopup.alert() before alert modal shown, there’s a blue box in center, seems lagging right?

I try to run in real device Lenovo A706, Android version 4.1.2, versi OS LenovoMagic 4.0

So any idea how to fix this? or maybe you need more detail about my app? i can provide more detail if you need it :smile:
Thanks


#2

Update

After read this post Tabs and clicks not working in ionic template
And replace all my Ionic Lib with nightly version, then the problem is gone …

But about blue box before alert show still exists, since this blue box just flash in very short time, then i’m unable to capture it …


#3

Blue box? Hmm, I’ve never seen this before. It could be a performance lag on the device, is there anyway you could either get a screen cast of this or an image? I’ve used popups on an android 4.1 device and had no issues.


#4

Finally i can capture my screen to gif :stuck_out_tongue:

Here’s what i mean with blue box before popup appear … i’ve use nightly build for info :smile:

Thanks


#5

Oh wow, that is strange! Whats even more strange is how off the blue box appears. Very odd. I know a lot of work was just done on taps/click issues.

@adam, any idea on what this could be? I’ve never seen anything like this when I’ve tested on an android before


#6

Do you mind posting a sample of your code? Or a codepen too would be better


#7

If you could share a small snippet to reproduce the issue that should help. It may be one of Android’s awesome overlays, but I’d have to test it out a bit farther to figure it out. Thanks


#8

Hi, i’m sorry not using Codepen, since i use abstract template, and i dont how to setup with them
So here we are

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter" animation="slide-left-right-ios7">
     
     <ion-nav-view id="main"></ion-nav-view>
     
  </body>
</html>

menu.html

<ion-side-menus>

    <ion-pane ion-side-menu-content>
        <ion-nav-bar class="bar-positive">
            <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-left"></i></ion-nav-back-button>
        </ion-nav-bar>
        <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
    </ion-pane>

    <ion-side-menu side="left">
        <header class="bar bar-header bar-dark">
            <h1 class="title">Menu</h1>
        </header>
        <ion-content class="has-header">
            <ion-list>
                <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/main">
                    <i class="icon ion-home"></i>
                    Home
                </ion-item>
                <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/kredit">
                    <i class="icon ion-grid"></i>
                    Kredit
                </ion-item>
                <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/profile">
                    <i class="icon ion-document-text"></i>
                    Report
                </ion-item>
                <ion-item item-type="item-icon-left" nav-clear menu-close href="#/app/setting">
                    <i class="icon ion-settings"></i>
                    Setting
                </ion-item>
                <ion-item item-type="item-icon-left" nav-clear menu-close ng-click="logout()">
                    <i class="icon ion-log-out"></i>
                    Logout
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>

</ion-side-menus>

kredit-cek-baki.html

<ion-view title="Cek Baki">

    <ion-nav-buttons side="right">
        <button class="button button-icon ion-search" ng-click="showModal()"></button>
    </ion-nav-buttons>

    <ion-content has-header="true" padding="true">

        <div ng-switch on="result">
            <div ng-switch-when="true">
                <div class="list">
                    <div class="item">
                        <h2>No Rekening</h2>
                        <p>{{ data.rekening }}</p>
                    </div>
                    <div class="item">
                        <h2>Nama Debitur</h2>
                        <p>{{ data.namaDebitur }}</p>
                    </div>
                    <div class="item">
                        <h2>Baki Debet</h2>
                        <p>Rp{{ data.bakiDebet }},00</p>
                    </div>
                </div>
            </div>
            <div ng-switch-default>
                <p>Tap ikon search di pojok kanan atas untuk mencari rekening</p>
            </div>
        </div>

    </ion-content>

</ion-view>

<script id="new-task.html" type="text/ng-template">

  <div class="modal">

    <!-- Modal header bar -->
    <ion-header-bar class="bar-positive">
      <h1 class="title"></h1>
      <button class="button button-clear" ng-click="closeModal()">Cancel</button>
    </ion-header-bar>

    <!-- Modal content area -->
    <ion-content>

        <div class="list">
            <label class="item item-input">
                <span class="input-label">No Rekening</span>
                <input type="number" ng-model="data.rekening">
            </label>
            <label class="item item-input">
                <span class="input-label">Password/PIN</span>
                <input type="password" ng-model="data.password">
            </label>
        </div>
        <div class="padding">
            <button class="button button-block button-positive" ng-click="submitModal(data)">
                Submit
            </button>
        </div>

    </ion-content>

  </div>

</script>

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.StatusBar) {
            // org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})

.config(function($stateProvider, $urlRouterProvider) {

    // Ionic uses AngularUI Router which uses the concept of states
    // Learn more here: https://github.com/angular-ui/ui-router
    // Set up the various states which the app can be in.
    // Each state's controller can be found in controllers.js
    $stateProvider

        // default page when first loaded
        .state('signin', {
            url: "/sign-in",
            templateUrl: "templates/sign-in.html",
            controller: 'SignInCtrl'
        })

        // abstract/default layout after sign-in
        .state('app', {
            url: '/app',
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: "AppCtrl"
        })

        // default page after sign-in
        .state('app.main', {
            url: "/main",
            views: {
                'menuContent': {
                    templateUrl: "templates/main.html",
                    controller: "MainCtrl"
                }
            }
        })

        // page for "kredit" main
        .state('app.kredit', {
            url: "/kredit",
            views: {
                'menuContent': {
                    templateUrl: "templates/kredit.html",
                    controller: "KreditCtrl"
                }
            }
        })

        // page for "kredit/cek-baki" main
        .state('app.cek-baki', {
            url: "/cek-baki",
            views: {
                'menuContent': {
                    templateUrl: "templates/kredit-cek-baki.html",
                    controller: "CekBakiCtrl"
                }
            }
        })

        // page for "kredit/cek-baki" main
        .state('app.setting', {
            url: "/setting",
            views: {
                'menuContent': {
                    templateUrl: "templates/setting.html",
                    controller: "SettingCtrl"
                }
            }
        })

    // if none of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise("/sign-in");

});

controllers.js

.controller('CekBakiCtrl', function ($scope, $state, $ionicPopup, $ionicModal) {
        $scope.data     = {};
        $scope.result   = false;

        // Create and load the Modal
          $ionicModal.fromTemplateUrl('new-task.html', function(modal) {
            $scope.modal = modal;
          }, {
            scope: $scope,
            animation: 'slide-in-up',
            focusFirstInput: true
          });

          // Called when the form is submitted
        $scope.submitModal = function(data) {
            if ( ! $scope.data.rekening) {
                $ionicPopup.alert({
                    title: 'Rekening harus di isi'
                });
                return;
            }

            if ( ! $scope.data.password) {
                $ionicPopup.alert({
                    title: 'Password harus di isi'
                });
                return;
            }

            console.log(data);
            data.rekening = data.password = "";
            $scope.modal.hide();
            $scope.data.rekening    = '101-12345';
            $scope.data.namaDebitur = 'John Doe';
            $scope.data.bakiDebet   = '100.000';
            $scope.result   = true;
        };

        // Open our new task modal
        $scope.showModal = function() {
            $scope.modal.show();
            $scope.result   = false;
        };

        // Close the new task modal
        $scope.closeModal = function() {
            $scope.modal.hide();
        };
    })

Thats all, thanks for all responds


#9

I tried putting your code in a CodePen. However, it seems some stuff is missing from your code above :

There is no sign-in template, not MainCtrl etc. Why don’t you see how I put stuff in this sample, then continue putting the rest of your code in.


#10

Hi @Calendee

Finally i can make it in Codepen

To reproduce the problem try to signin, leave it blank its ok, then from side menu > kredit > cek baki > click submit, without write any input to get alert …

This problem only occur when runing in android real device or emulator, for web everything is perfect

Thanks :smile:


#11

@mhartington I’m still Androidless. Can you test this now that we have a sample?


#12

Will do, I’ll report back once I finishing testing.


#13

Just tested this on my device and confirm that a blue box does appear.


#14

@mhartington

Ok, then i’m not the only one who see this …
Btw do you have some idea why this blue box appear? or maybe i did something wrong with my template structure?


#15

It has to do with css transforms of the ontap overlays. For reference, check this

There code was causeing some issue than it was preventing, so it was removed. If you need it, here are the lines of code that were removed from the _forms.scss file

Mind you, the devs do know about this issue so they will be working to resolve it.


#16

Ok, i’ll open this issue in github :smile:
Thanks for your respond :smile:

Update:


#17

Already closed in github referenced to new nightly release

Thanks


#18

Just tested today with nightly Build 1839 and the problem is still exists

And now appear within ionicPopup.alert even without modal like example above, this is my screenshot, tested with Android 4.1.1 Genymotion

Also sign in button still not rendered with smooth :frowning:


#19

@ghprod You said the problem still exists, could you elaborate? You mean the button not being smooth, or the blue box that flashes, or the tap/click not responding?


#20

@adam I have seen (on android 4.2.2) that sometimes, specifically for text links, the tap/click is not responding (latest nightly) and it requires two to three clicks to make it action. Never seen a problem on IOS with the same code.

Not sure if this is the same problem or something else, hence why I wasn’t jumping into the thread earlier.