search

triceam / app-UI

app-UI is a collection of user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices. app-UI is a continual work in progress - it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (http://www.phonegap.com). app-UI can easily be styled/customized using CSS.
http://triceam.github.com/app-UI/
Other
1.27k stars 239 forks source link

Viewnavigator not working correctly on Android #15

Open wimpie3 opened 12 years ago

wimpie3 commented 12 years ago

Severe cosmetic bugs using the viewnavigator menu on Android browser (tested on ICS).

triceam commented 12 years ago

Any chance you can provide more detail, as well as screenshots or a screen capture? I only have Android 2.3 and 3.0 at my immediate disposal for testing, and it seems to work OK in both of those. Are these layout issues, animation issues, style issues, etc?

If you have forked the code, try removing all css styles "-webkit-backface-visibility: hidden;" from viewnavigator.css (there are 3 instances of it). The "-webkit-backface-visibility" CSS property is required to have fluid animations on Android (prevents flickering), but causes other UI issues, and I wonder if it may be related.

wimpie3 commented 12 years ago

The issues I have are on this page: http://triceam.github.com/app-UI/examples/samples/02%20-%20splitviewnavigator/01%20-%20basic/index.html

(as you can see, this concerns the SPLITviewnagivator instead of the viewnavigator I've mentioned in the initial bug report).

Initially, the page loads fine. The body scrolls, the Menu button can be clicked. However, as soon as I click the Menu button, the screen turns into transparent green for a second (some kind of focus indication?). This continues to happen when I press outside of the menu items in the dropdown menu.

I now click on "push sidebar view" once. Works fine, the menu slides to the left. I click again on "push sidebar view" and the menu goes away and leaves a grey line on the right (the border of the menu I presume). From that point, the text in the titlebar is cut. As soon as I click on the array to the left of the grey line, the menu comes back, but clicking the "Back" button in the menu puts the "Back" button in the middle of the title bar... so basically everything gets messed up after that.

triceam commented 12 years ago

OK, thanks. The additional detail helps. I'll see if I can recreate it either on a the Android emulator, or see if I can track down a device for testing. What make/model Android device did this happen on?

wimpie3 commented 12 years ago

HTC Sensation with ICS. Good luck, I'm really impressed with what you've done so far and I will continue to submit bug reports to help you finetune this project.

triceam commented 12 years ago

Thanks! I just tested on a Samsung Galaxy Tab 10.1 running Android 3.0 and a Kindle Fire with Android 2.3, and i didn't see any issue... this has to be an issue with ICS.

triceam commented 12 years ago

I see some stuttering in the animations and very jerky/slow performance in the Android emulator for 4.0, but I attribute that to the poor performance of the Android emulator. Unfortunately, I am not seeing these issues, and the split view navigator is still usable. This could be one of those on-device only issues that are so darn hard to track down... I'll let you know if I am able to recreate it and find a resolution.

mohamedazher commented 11 years ago

I had similar issues with view navigators. Tested on Galaxy S3 on JB and HTC Sensation on ICS. I found the problem with the sliding animation which occasionally blanks out/flickers, and sometimes the title animation fails when a new view is pushed and the new title gets overlapped with the old one. And also at times a blank view is pushed in on clicking back. And also there is a 1px jump at the end of the animation which i feel is due to jquery.

I found the problem to mostly occur during the push and pop animations. I tried setting the useTranslate3d: false and animationDuration=0 in viewnavigator.js. The view no longer animate but the problem is greatly reduced and occurs rarely.

MinyieDiaz commented 11 years ago

Hello, I am experiencing the same issue as mohamedazher, in my case the flicker occurs on the push animation only. Samsung Galaxy Note 2, JB 4.1.2. PhoneGap 2.5