In the process of creating an internal tool for my team I found that trying to zoom an image and move it around was not as simply as a single “zoom” CSS attribute. While Chrome supports “zoom” and it works quite well, the other browsers don’t work consistently, especially if you store the zoom and position values in a script. I stored the positions on the images to be replayed and I found all kinds of inconsistencies across browsers. What did work consistently is the transform CSS property, but that brought another challenge.
The video in the previous post did not do the test justice as many could not tell it truly is a smoother animation so here you go, you can view this web page yourself on the different browsers.
What I see on my machine is a much smoother animation of both the outer box and the growing text. Notice it is not choppy at all in IE, very smooth. And just an FYI, I am a solid Chrome user for a few years now, before that FireFox, and before that IE. With all of these IE commercials on television I had to see if this really was “faster”, at least in this space. I would be interested to hear what others see.
I downloaded the Adobe’s new Edge Animate and played around with the tutorials for a bit and even did a basic animation. After I saved the HTML I then launched it into my default browser (Chrome) and was not very impressed. The animation was very choppy and even left blit marks throughout the animation, some really bad double buffering going on…
I then went back into Edge Animate and added even more animation, the text growing over the time line. This made it even worse in Chrome! I then opened the file in all of the major browsers (IE, FireFox, and Safari) and was amazed how great Internet Explorer did! It was by far the smoothest animation, with FireFox coming in a close second. You can’t completely tell by the video but you can definitely see how horrible Chrome is. And yes, these are all the latest browsers, except FireFox (I can’t keep up with their weekly updates).
I know this is a basic test but its pretty clear who the winner is here, without any “special” HTML5 code. It could also be that Adobe is in Microsofts pockets and intentionally made it perform better in IE but someone would have to prove that to me.
In the video I show Chrome, Safari, FireFox, then Internet Explorer.
I must be a FireFox advocate or at least like the zoom in and out shortcuts because I find myself using CTRL+/- in many places like Notes, Symphony, etc. The only problem is the keys do nothing in them!
Who is with me?
- dojo.isAIR – true if running within the Adobe AIR enviroment
- dojo.isQuirks – is the browser in Quirks-Mode
- dojo.isBrowser (not typically needed when only targeting browsers)