Android 4.4.3 and phonegap not working properly

ionic-v1
21

i think it is an ionic issue.

22

Now I notice that ng-click and ng-href not working for me (android 4.2.2 + ipad3 ios 7) :frowning:

23

Checking on this right now

@kfir can you provide the css for your tabs? This way I can accurately try to reproduce the issue

24 
.tabs-positive > .tabs, .tabs.tabs-positive{
/*	background-color: #ECECEC;*/
	color: #777;
	border-width: 0px;
	box-shadow: -2px 0px 9px 0px #B1B1B1;
	background: #F7F7F7;
	background: -moz-linear-gradient(top, #f7f7f7 0%, #ececec 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7F7F7), color-stop(100%,#ECECEC));
	background: -webkit-linear-gradient(top, #F7F7F7 0%,#ECECEC 100%);
	background: -o-linear-gradient(top, #f7f7f7 0%,#ececec 100%);
	background: -ms-linear-gradient(top, #f7f7f7 0%,#ececec 100%);
	background: linear-gradient(to bottom, #F7F7F7 0%,#ECECEC 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ececec',GradientType=0 );
	text-shadow: 2px 2px 0px #F7F7F7;
}
.tabs-positive > .tabs a[icon="ion-plus-round bigButton"]{
	margin-top: -15px;
	background: #ECECEC;
	border-top-left-radius: 65px;
	border-top-right-radius: 65px;
	line-height: 65px;
	height: 65px;
	box-shadow: 0px -3px 4px -2px #C4C4C4;
}
.tabs-positive > .tabs .ion-plus-round.bigButton{
	width: 50px;
	height: 50px;
	border-radius: 30px;
	background: #4ECDC4;
	line-height: 50px;
	margin-top: 8px;
	box-shadow: 0px 0px 0px 3px #D6D6D6,inset 0px 0px 10px 0px #B67777;
	text-shadow: 0px 0px 0px #F7F7F7!important;
	color: #fff;

	background: #f7b74a; /* Old browsers */
	background: -moz-linear-gradient(top,  #f7b74a 0%, #fa902e 50%, #fb821e 50%, #fe5f04 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7b74a), color-stop(50%,#fa902e), color-stop(50%,#fb821e), color-stop(100%,#fe5f04)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #f7b74a 0%,#fa902e 50%,#fb821e 50%,#fe5f04 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #f7b74a 0%,#fa902e 50%,#fb821e 50%,#fe5f04 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #f7b74a 0%,#fa902e 50%,#fb821e 50%,#fe5f04 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #f7b74a 0%,#fa902e 50%,#fb821e 50%,#fe5f04 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7b74a', endColorstr='#fe5f04',GradientType=0 ); /* IE6-9 */
	background: #FF6B6B;
}
.tabs-positive > .tabs .ion-plus-round.bigButton:active{	
	background: #fe5f04; /* Old browsers */
	background: -moz-linear-gradient(top,  #fe5f04 0%, #fb821e 50%, #fa902e 50%, #f7b74a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fe5f04), color-stop(50%,#fb821e), color-stop(50%,#fa902e), color-stop(100%,#f7b74a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fe5f04 0%,#fb821e 50%,#fa902e 50%,#f7b74a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fe5f04 0%,#fb821e 50%,#fa902e 50%,#f7b74a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fe5f04 0%,#fb821e 50%,#fa902e 50%,#f7b74a 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fe5f04 0%,#fb821e 50%,#fa902e 50%,#f7b74a 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe5f04', endColorstr='#f7b74a',GradientType=0 ); /* IE6-9 */
	
	background:#EC5151
}
25

Hate to ask, but could you also include the markup for the tabs, Can’t seem to get the look you want even with your css.

But as far as resolving this goes…

  • The long title on a back button is an issue, I’ll open an issue for
    this on github.

  • Tabs are getting a class of tabs-striped when on android, as part of our platform specific changes. To style for this, add these classes.

CSS

.tabs-striped.tabs-positive .tab-item.tab-item-active,
.tabs-striped.tabs-positive .tab-item.active,
.tabs-striped.tabs-positive .tab-item.activated{}
26

Okay I’ll check it out
What about ng-click and ng-href? They do not work for me :frowning: app not functioning at all

27

On the actual tab themselves?

28

Well no, they do not work anywhere, but in Chrome it works

29

Couldn’t reproduce that. My ng-clicks worked fine. Could be all the libraries overlapping each other.

30

Found it! fastclick.js ruined it :slight_smile:
Android 4.2.2 it works tomorrow I’ll check the rest of the phones :slight_smile:
Thanks for everything!!! :slight_smile:

31

Oh yeah, don’t include fast click! We have our own system in place to prevent the 300ms delay on mobile so no other library is needed.

Looking at you js again, neither should angular-touch

32

I do not understand one thing,
I downloaded the app to my phone back button worked and closed modals.
After I downloaded the app again back button closed the app :\

33

Did you change anything else in your scripts?
They no longer close modals?

34

I managed,
But I have a delay on every click

35

And more problem i have this white strip over the top and on the right and left of the page
How do I remove it?

36

I’ve seen that bar too, but I believe its because of androids webview. When I used the remote inspection, there aren’t any visible css rules causing it.

37

Okay, what about this?

But I have a delay on every click

38

Without looking at some code, I can’t really say. I’ve done a lot of testing on android and haven’t had any issues. Do you have any conflicting code? Any extra touch or click libraries?

39

I removed all the plugins of fast click

40

What about angular touch?