We Keep Coding

Ionic App jerky while smooth in Mobile Browser

I've written an Ionic app, where nine images are positioned inside a DIV. Here's the relevant snippet from my CSS file:
.mydiv {
position: relative;
overflow: hidden;
}
.mydiv > img {
position: absolute;
box-shadow: 6px 6px 8px #aaaaaa;
}
I'm using $ionicGesture.on('drag', function(e) {}) to move these images around, following the move of my finger. That's the relevant part from my controller.js:
jQuery('.mydiv > img').each(function(i, myImg) {
jQuery(myImg).css('left', initLeft + e.gesture.touches[0].pageX - initX);
jQuery(myImg).css('top', initTop + e.gesture.touches[0].pageY - initY);
}
So, basically, every time the drag event occurs, I move the images by changing their 'left' and 'top' attribute.
The problem is though, that this solutions works wonderfully in a browser, but is horribly lagging as an Ionic app on my iPhone 5. When I put the contents of the Ionic 'www' folder on a web server and access the web app with my iPhone's web browser, the movement is extremely smooth. So, obviously, it's not a performance issue, but Ionic is doing something that makes the app stuttering. Using the Chrome profiler on my Mac, I learned nearly all of the time is used by internal Ionic functions and not by my client code. This seems to be another hint, that this is some kind of Ionic problem.
Why is my app, that runs perfectly smooth in my mobile browser on the same device gets jerky as hell when packed as an Ionic app?
Additional information:
Those images I drag along are scaled with jQuery(myImg).width(). I now replaced them with pre-scaled image files and got rid of the box-shadow style. Now the lagging is reduced but still worse than in the mobile browser. Is it possible, that the mobile Safari on my iPhone uses the GPU for Javascript induced style changes, while for a Cordova app the GPU is not used?

Looks like you have animation issue. Here is an article from Ionic team that explains on how to deal with this.
What’s happening is that as you try to animate the left property of
the items, the web view will have to go back and try to recalculate
that item’s position. This happens for a lot of CSS properties.
Thankfully, we have other ways to animate these items.
Let’s change that left property to transform and set the value to use
translate3d. Translate3d is a special CSS value that will actually
move the animation to the device’s GPU. This is called hardware
accelerated animation.
#-webkit-keyframes slideIn {
0% {
left: -100%;
}
100% {
left: 0;
}
}
#-webkit-keyframes slideInSmooth {
0% {
-webkit-transform: translate3d(-100%,0,0);
}
100% {
-webkit-transform: translate3d(0,0,0);
}
}
.slide-in{
-webkit-animation: slideInSmooth ease-in 1;
animation: slideInSmooth ease-in 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 750ms;
animation-duration: 750ms;
}

I haven't seen your animation or your code but my guess is that the device GPU isn't carrying the weight it should.
Obviously without seeing your app, I'm doing some guessing here -- but from what you've described this may be the issue:
There are a couple ways to get the GPU to kick in, but the most basic is not to animate using "top" and "left". Using standard CSS positioning like top/left to animate DOM elements works, but it's the slowest way to go and as you've discovered: performance tends to suck in many environments. (Particularly when you're using complex images or blurs/shadows).
A far better way to go is to use translateX / translateY which engages the GPU. That should give you silky smooth performance. Using translateX and translateY will also allow for subpixel rendering and give a far smoother appearance than using top/left which blips along pixel-by-pixel.
There's an excellent discussion of this by a Chrome team member here:
https://www.youtube.com/watch?v=NZelrwd_iRs
Lastly, if for some reason you must use top/left -- a quick and somewhat hacky method to get the GPU to kick in is to set the parent DIV to translate3d(0, 0, 0);
This forces the parent layer into the hands of the GPU (via 3D transforms) during the browser-paint, and the subsequent standard CSS top/left changes that you're using should now render using the GPU. Needless to say, this second method isn't the best way to go in terms of best-practices, so go with CSS transforms first if that's an option.

Using transform: translate3d() does the trick. Animations are now extremely smooth. Because I had some trouble to convert my code from the CSS left-top-style to using translate3d(), here is what I did as a reference for other users:
jQuery('.mydiv > img').each(function(i, myImg) {
var x = initLeft + e.gesture.touches[0].pageX - initX;
var y = initTop + e.gesture.touches[0].pageY - initY;
jQuery(myImg).css({
'-webkit-transform' : 'translate3d('+x+'px, '+y+'px, 0px)',
'transform' : 'translate3d('+x+'px, '+y+'px, 0px)'
});
}
I even can switch on box-shadow again and the animation stays silky smooth.

Adding styles using javascript based on browser/platform

I want to add multiple css styles to a dom element and it should also work in different browsers.
So, performance wise which one of the below would be the better option?
Adding all different prefixed css together leaving the browser to work on which one to select
domElement.style.cssText = "-webkit-transform: scaleY(1.25); transform: scaleY(1.25)";
Adding css based on the browser or platform programmatically
if(platform == "Chrome"){ //assume platform is found initially using js
domElement.style.cssText = "-webkit-transform: scaleY(1.25);
} else {
domElement.style.cssText = "transform: scaleY(1.25);
}

You should not try to optimize what the browser already does on its own.
Just throw in as many invalid CSS properties as you want. An invalid CSS selector or property is not evaluated by the browser.
You are doing some mistakes/errors:
1.) Do not use inline stylesheets. There are already too many question on SO on how to overwrite such inline styles. The short answer is: you can't. The longer answer is: you can, but not without opening a door to the !important hell.
2.) You are doing client-detection in a case that clearly requires feature detection. There is no possibility for your code to recognize, that a newer Chrome version already uses the un-prefixed notation of that property.
It would be much simpler and gaining more performance if you can do that without any JS at all:
.my-element:hover {
-webkit-transform: scale(0, 1.25);
-ms-transform: scale(0, 1.25); // IE9 only
transform: scale(0, 1.25);
}

Raphael opacity not displaying on IE

I'm having a problem with the opacity of a div when my site is viewed on Internet Explorer. Using Raphael 2.0 (un-minified) I create a rectangle using the following code:
var rIn = Raphael("myDiv", "100%", "100%");
rIn.rect(0, 0, "100%", "100%").attr({fill:"black", stroke:"none", opacity:0.6});
In my CSS files if I have transparent divs using the opacity tag, I also write it include filter which seems to work fine for IE.
opacity:0.6; filter: alpha(opacity = 60);
However, Raphael does not appear to allow filter as a property, so this rectangle does not show up at all. This is only a problem on IE - it works on FF/Chrome/Safarai on Win/Mac without a problem.

filter only works for IE5-7. To support IE8, you need this property as well before your filter property:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
This QuirksMode article should help you as well.
Actually, try a class:
.opacity60 {
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
}
And set your rectangle's class to opacity60 via a setAttribute('class', 'opacity60') call.

Rotating a div element

Is it possible to rotate a div element using Javascript & NOT using HTML 5?
If so what attributes of the element do I set/change to make it rotate? Ie, div.what?
PS: When I say rotate I mean rotate an imagae around an axis, not every x milliseconds show a different image rotation.

Old question, but the answer might help someone...
You can rotate elements using proprietary CSS markup in all major browsers (the term HTML5 isn't specifically relevant here though).
Example of how to rotate a element 45 degrees using CSS:
.example {
-webkit-transform: rotate(45deg); /* Chrome & Safari */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9+ */
-o-transform: rotate(45deg); /* Opera */
transform: rotate(45deg); /* CSS3 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}
Yes, the MSIE syntax is that horrible. Note the "sizingMethod='auto expand'" - that's crucial to avoid the result being cropped.
I'm fairly sure Matrix transforms (at least in some capacity) are also supported In MSIE 6, but it's more pernickety about under what circumstances it supports them (and it's increasingly hard to care 8).

Yes, it is possible to rotate a div not using HTML5, but using CSS3.
You can experiment with CSS rotation on CSS3 Please (toggle the .box_rotate rule on).
For more info, Google for: css rotate
If you want a way to have rotated text that works on all browsers (including IE6) then try Raphaël.

I know I am late. For posterity's sake, I wanted to post this: This website is pretty good and it even performs the matrix transformations for its corresponding css3 counterparts

You can do it using Matrix in IE. Here is a function that solves it in a crossbrowser way.
http://kaisarcode.com/javascript-rotate

If you are looking for a way to do it instantaneously, than you can use
element.style.transform = "rotateZ(90deg");
Make sure to use quotes around the CSS statement.
If you want it over the duration of, say, a second (I know you don't want this, I am just doing it anyways), you can put
element.style.transition = "1s";
element.style.transform = "rotateZ(90deg)";

CSS Cross-browser opacity from Javascript

I want to turn down the opacity on an element when a user performs an action.
The current code I have is:
document.getElementById('MyOpaqueElement').style.opacity = 0.3;
// There are checks in the real code for NULL, etc.
This works on Firefox, Safari, etc. IE8 has different ideas about opacity. I have read a couple of articles but have yet to find a definitive answer on the most portable method to do this in a cross-browser way.

There are various browsers-specific settings and notations you need to take into consideration.
See Quirksmode.org: CSS2 - Opacity
I suggest using a Framework like JQuery, Prototype, MooTools or Dojo. I know it seems ridiculous to add dozens of kilobytes of code just for some opacity at first, but it's really worth it. It just works in one way for all browsers.

EDIT- Poster is using jquery..
Easy way:
$(el).css('opacity', '0.3');
(I checked the jquery sources, and it handles opacity for cross-browser compatibility automatically, so that should work)
Or for a CSS solution:
Just give it a class, e.g. 'transparent', and add this to your CSS file:
.transparent {
filter: alpha(opacity=30); /* for IE */
-khtml-opacity: 0.3; /* khtml, old safari */
-moz-opacity: 0.3; /* old mozilla, netscape */
opacity: 0.3; /* good browsers: FF, safari, opera */
}

The equivalent should be document.getElementById('MyOpaqueElement').style.filter = 'alpha(opacity=30)';
By the way, even if you don't use a library like YUI or JQuery, you can download them and search their sources for the word
opacity
.