Android PhoneGap and CSS translate3d

[Rob Lauer]

I'm trying to apply -webkit-transform: translate3d(0,0,0) to an image in an Android PhoneGap app. I'm using iScroll4 for pinch-zoom on the image. The same exact CSS works great on iOS, but it is clear that the Android webview is not applying this CSS to the image correctly (the image remains blocky and does not scale well at all).

The strange thing is that if I open the same file in the Android browser (NOT in PhoneGap) it works fine. This happens with Android 2 and 4. Any ideas?

[Rob Lauer]

Bump. Anybody have this experience at all? Seems very strange to me. I don't know if it's an iScroll thing or a PhoneGap thing unfortunately.

Thanks

[Joe Bowser]

3D CSS transforms don't work on Android 2.x or Android 3.x at all.  Did you have this working on the Android 2.3 stock browser? 

If you're looking to do it on Android 4.x, you will have to add android:hardwareAccelerated=true to the application tag in your Android Manifest.  This will cause Android 3.x applications to be even jankier, because Android 3.x HTML support is worse than Android 2.x.  The Android Browser on phones is actually hardware accelerated. 

[Philzen]

AFAIK Phonegap extends the Android WebView to CordovaWebView - so if you are saying the problem doesn't appear when your HTML5 app is opened in the stock browser, then in theory you should be able to produce a working app which's `MainActivity extends Activity` instead of `extends DroidGap`, using a standard WebView.

I suppose there may be some settings (such as setBuiltInZoomControls()) involved in this (as in http://stackoverflow.com/questions/7121053/how-to-enable-zoom-controls-and-pinch-zoom-in-a-webview) - having should also be accessible on the `appView` member in your DroidGap activity.

If that all fails, you could also enable multitouch gestures with adding https://github.com/Philzen/webview-multitouch-polyfill to your app container (but guessing you are rdlauer on github you may already know that ;) )

[Jeremy]

Hi,

I am also struggling to get 3d css transforms to work.  It seems that the html element being transformed cannot have had 'display:none' applied to ever.  Even removing this so the element is visible in the DOM makes no difference when the css 3d tranform is applied!

I have wasted days trying to get a smooth div movement from left to right!  I tried JQuery mobile animations and now 3d css transform only works on Android 4!

Any workarounds?  I could've built this already in native but I want an iOS version too!

Cheers for your time

J

[Kerri Shotts]

In Android the element needs to have the 3d transform in place from the moment of its creation. Otherwise you get all sorts of horrible flashing, blinking, stutters, etc. 

Display:none should in no way affect the element, but if it is for some reason, transform it off screen first, then hide it. /But keep a transform on it, even if it is all 0./

Also, my opinion, but I'd ditch jQm.  

Sent from my phone. 

___________________________________

Kerri Shotts

photoKandy Studios, LLC

On the Web: http://www.photokandy.com/

Social Media:

          Twitter: @photokandy, http://twitter.com/photokandy

          Tumblr: http://photokandy.tumblr.com/

          Github: https://github.com/kerrishotts

                        https://github.com/organizations/photokandyStudios

          CoderWall: https://coderwall.com/kerrishotts

Apps on the Apple Store:

          https://itunes.apple.com/us/artist/photokandy-studios-llc/id498577828

Books:

         http://www.packtpub.com/phonegap-2-mobile-application-hotshot/book

          http://www.packtpub.com/phonegap-social-app-development/book

--
-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 
To compile in the cloud, check out build.phonegap.com
---
You received this message because you are subscribed to the Google Groups "phonegap" group.
To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Jeremy]

I have ditched jQM - just using jQ.

My issue is that using css 3d transforms only works on Android 4.x and not on 2.x or 3.x...have you found this?

[Rob Lauer]

I seem to remember being forced to use hardware acceleration - which then caused a host of other problems. So, try that, but YMMV. Good luck!

--

-- You received this message because you are subscribed to the Google
Groups "phonegap" group.
To post to this group, send email to phon...@googlegroups.com
To unsubscribe from this group, send email to
phonegap+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/phonegap?hl=en?hl=en
 
For more info on PhoneGap or to download the code go to www.phonegap.com
 
To compile in the cloud, check out build.phonegap.com
---

You received this message because you are subscribed to a topic in the Google Groups "phonegap" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/phonegap/SlNAA9EOpxA/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to phonegap+u...@googlegroups.com.

[Fly_Molo]

I would suggest that you ditch jQuery all together, but that's beside the point. 

I've been able to successfully use 3d transforms on Android and iOS.  There are a couple gotchas: 

1. -webkit-transform: scale(x, x) will NOT work on Android 2.3

2. NEVER touch display:none if you want a transition to work.  Move it off screen & remove it from the DOM, but don't mess with display

3. @keyframe animations on android will only animate a single property

4. If you use keyframe animations, the "-webkit-animation-fill-mode: forwards;" does not work on older android, so you have to reset the css properties at the end of the animations

Here's the CSS I'm using to display a modal window that slides up from the bottom of the screen:

    display: block;

    position: absolute;

    left: 0px;

    top: 640px; /* set dynamically to be the height of the screen */

    z-index: 1;

    

    -webkit-transform: translate3d( 0px, 0px, 0px );

    -webkit-transition: -webkit-transform 2s ease-in-out;

and in JS, to change the -webkit-transform value I use the following:

myDomElem.style.WebkitTransform = 'translate3d( 0px, -100%, 0px)';

Oh, and note that by using 100% as the value, it will slide the entire height of the dom element, no matter what the height is. 

Hope that helps.

[Kerri Shotts]

Re 2) you should be able to adjust display once off screen. I have, and haven't had a problem with it. But perhaps it also depends on how the element is handled in the document flow. (When doing view transitions, mine are absolutely positioned, so already out-of-flow, and a display change shouldn't affect any non-child elements). But as seems typical for Android, what works for one doesn't always work on all variations of Android, so it's just possible my devices have no problem with it, but other devices would. 

Agree to the rest, and especially wrt to getting rid of jQuery entirely. More problems than it is worth, imnsho. ;)

Sent from my phone. 

___________________________________

Kerri Shotts

photoKandy Studios, LLC

On the Web: http://www.photokandy.com/

Social Media:

          Twitter: @photokandy, http://twitter.com/photokandy

          Tumblr: http://photokandy.tumblr.com/

          Github: https://github.com/kerrishotts

                        https://github.com/organizations/photokandyStudios

          CoderWall: https://coderwall.com/kerrishotts

Apps on the Apple Store:

          https://itunes.apple.com/us/artist/photokandy-studios-llc/id498577828

Books:

         http://www.packtpub.com/phonegap-2-mobile-application-hotshot/book

          http://www.packtpub.com/phonegap-social-app-development/book

You received this message because you are subscribed to the Google Groups "phonegap" group.

To unsubscribe from this group and stop receiving emails from it, send an email to phonegap+u...@googlegroups.com.

[Jeremy]

Hi Kerri and FM,

Many thanks for your advice.  I implemented Kerri's code on Android 4.0.  

My page has a menu with 3 buttons that when clicked will scroll a related div onto the screen.  

Each off-screen div has the following css class:

.hiddenOffScreen {

top:-10000px;

position:absolute;

}

There's a 'back' button that when pressed scrolls the new div off-screen and shows the menu again.  I have a javascript listener that checks: the transition has finished and the menu is being shown. It then moves the off-screen elements 'way' off-screen by re-applying the 'hiddenOffScreen' css class as follows:

moreTabCarousel.on('transitionend webkitTransitionEnd oTransitionEnd otransitionend', function() {

  if (moreTabCarousel.hasClass("scrollLeft")) {

  //console.log("transition finished on #moreTab - show clicked button's content");

  } else {

  console.log("transition finished on #moreTab - show buttons");

  $('#morePage li.slideBox').addClass("hiddenOffScreen");

  }  

});

Now when I click another button the previously viewed button's content flickers off beneath the new button's content that is being scrolled onto the screen.  I can see in the LogCat debug console in Eclipse that my .hiddenOffScreen css is applied to all my button's related 'off-screen' div containers. I also see this in Ripple. But, it seems that the phone doesn't actually move the previously viewed content up by -10000px until the next 3d transition is run ie when another button from the menu is pressed!  I've tried varying the speed of the transition but it makes no difference.

Have you seen this?

[Philipp Austermann]

I strongly suggest you ditch jqm AND (if you don't have external libraries depending on it) jQuery and go with intel appframework (former jqmobi / jq UI) - it yields the best performance & just works like a charm on android 2.x (and of course android 4, iOs, blackberry, win phone, etc...)

Just a few weeks ago i almost went crazy over writing a pure css3 animation, after 2 hours of scratching my head but the animation still not working on android 2 i tried:  https://github.com/01org/appframework/tree/master/plugins#jqcss3animate - and voilà: the animation worked on all my target platforms straightaway.

Of course it's a good thing to understand the css3 features of the different platforms, but if you just want to continue building your app and achieve faster results, i found an invaluable tool in jqmobi as they have all those device glitches (which are especially prominent on android) abstracted and dealt with.

Cheers - Phil

--

[Jeremy Colton]

Hi Phil,

I am at the end of building an app for a client.  The app is dependent on JQuery and I am trying to make the UI look smoother. 

I figured out early on that JQM was a headache and too inflexible and dropped it after a few days.

I will look into jqmobi for future apps and will try investigating what jqmobi do to make their animations work underneath and copy the code across. 

If there's a company that can take my app and beautify it across Android 2.x, 3, 4.0.x and 4.1.x please let me know! :)

Thanks to all

[Rob Lauer]

As an aside, you should take a good look at Kendo UI Mobile. As a developer I found it significantly more responsive than JQM and its UI adapts to the device it is on (iOS/Android/WP8/BB). Full disclosure - I'm a Developer Advocate for Icenium and Kendo UI - but in my last job I wrote hybrid mobile apps using Kendo UI Mobile and loved it.

[Jeremy]

Hi Phil,

I am trialling jqmobi but I have the following integration issues when running the index.html and all its .js from the download 'kitchensink' sample from jqmobi:

a) In Ripple I get "object has no method 'launch;" - the code calls $.ui.launch() but it's not found even though the related jq.ui.js is available!

b) When running on my HTC Evo with Phonegap 2.2, the screen is shaking as if it's having an epileptic fit!

How do you integrate jqmobi into PhoneGap?

Thanks

Jeremy