Rotating png images using javascript css transformations in IE - javascript

I need to rotate png images (some circle disks). It is done with some help of jQuery:
$.fn.rleft = function() {
return this.animate({
rotate: '-=45deg'
});
};
In all versions of IE < 9 things go terribly wrong. Rotation animation is crappy, and there is happening something very ugly with alpha transparency of those images, after they have been rotated.
Is it possible to make this work in IE 8 and 7 (and, more or less IE 6?). If not, I will be forced to order it to be done in Flash. But I would like first to try to do it using just css and javascript (svg?). Do you have any tips, for using different technology, or js library?
Thank you in advance for any answers.
EDIT: I actually didn't find solution for rotating png images in IE using CSS and JS. That said, everything was redone using Raphaël, which works very nice even in IE 6.
EDIT2: End result done with Raphael: http://ipm-profil.de/diversity/
I used GIF images, and masked "rough edges" of those circles with SVG (Raphael code).

I would highly recommend using the Raphaël—JavaScript Library for this. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ and is very easy to use, and works well with JQuery.

IF you don't care if older browsers can view it IE 9 has add the transform property :
-webkit-transform: rotate(15deg) /* for Safari/Chrome */
-moz-transform: rotate(15deg) /* for Firfox */
-ms-transform: rotate(15deg) /* for hated IE */
transform: rotate(15deg) /* The way it should be. */
And I found a good JS at
http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html the JS is at the bottom of the post.

It might be worth doing it in SVG. It will work as is in all browsers including IE9. For IE < 9, you can use SVGWeb. Its a Flash shim to make SVG work in browsers that do not support it.

Related

CSS transform not working properly in Safari, even with -webkit-prefix

Been working on a project and wholly unsurprisingly Safari is throwing a curveball. It's a personal project so I don't really care for browser compatibility but this just bugs me beyond all else.
The project is heavily dependant on the CSS transform property. Safari says it's an "Unsupported property value". Prepending -webkit- doesn't make a difference.
The live project can be found on https://confetti.semhak.dev and the source code on https://github.com/grabbels/jsconfetti/
If you open the live page in modern browsers the expected behaviour happens, confetti flakes are placed randomly outward from the center. In Safari however, Safari doesn't recognize the inline css transform properties.
Example of the inline css being marked as unsupported by Safari:
transform: translate(-202.29527231536557px, -121.38897026273652px) scale(108.7192227372199%, 35.79831998128447%) rotate(301.3939182144637deg)
Note that prepending -webkit- to the transform handle does not seem to help.
Am I just not seeing a blatant mistake or is Safari really this stubborn/broken?
Apparently, Safari can't take percentage values in scale, they have to be decimal. So this should work:
scale(1.087192227372199, 0.3579831998128447)

how to show images with it's original smoothness in IE

i just disappoint with IE. how ever for image quality and better image view. Is there some thing css tricks for especially with IE that can show better Image appearance.
here is Image appearance of my screen in chrome :
here is Image appearance of my screen in IE :
i just want to know is that IE problem or there is my image problem or there is any way to fix this issue with css tricks.
please help me...
this is known IE issue you may try with
img.imageclassname {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
}
possible duplicate of IE shows black border around PNG when faded in
try with this one!
Just by what i have seen in the screenshots, I think the IE version is old or the browser is new but is rendering in an older standard (IE7 standards mode). Using F12 find out what mode IE is opening it. If it is opening it in an older mode, force browser to open in the latest mode by using the meta tag..
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
hopefully this helps.

CSS3 Flickering in Safari 6 on OSX (but this is not the flickering-to-white issue!)

This issue does not present on iOS or on Chrome so it is not a Webkit related issue. It seems to be specific to the latest Safari 6.0.2 on OS X 10.8.2 (and not fixed by 10.8.3 preview build 12D65 which comes with Safari 6.0.3). I shall test on Lion 10.7.5 with Safari 6.0.2 shortly, and will also be testing on preview build 12D68 as well.
http://jsfiddle.net/zrr2b/
Here is a fiddle that makes the problem quite apparent. If you've got a Mac running ML, you should see a significant difference between Chrome and Safari where Safari flickers a lot as you move the mouse around.
Basically the problem is that Safari will intermittently draw the target transform being set from JS for a single frame, then continue the transition animation. This causes a flicker, but only if the transition was in the middle of going somewhere to begin with. So the bug won't rear its ugly head for most (non intensive use) of CSS3 transition, but if functionality or visual effects depend on it to smoothly interpolate to a target (as my current project does) this flicker is not pleasant.
I have looked at similar topics related to flickering and applied pretty much all combinations of styles to counteract flickering, such as the -webkit-backface-visibility: hidden, forcing various parent elements to gain hardware acceleration, -webkit-transform-style: preserve-3d, -webkit-perspective: 1000, and none of them unfortunately do anything to address this Safari-specific problem of flickering, that is, flickering not to white or blank, but flickering to the target transform for a single frame.
Here in this branch you can see me set a bunch of styles that help with "regular flickering" but have no effect for me. http://jsfiddle.net/zrr2b/1/
As this is not a webkit specific issue I am unsure where to go about posting a bug report. It would be especially nice to get this in before 10.8.3 release since I see this as a rather big issue. Remember, this is the sort of thing that we're depending on HTML5 to do well in order for it to really kill Flash.
Updates:
Safari Version 6.0.3 (8536.28.10) on Mountain Lion 10.8.3 12D68 (Retina Macbook Pro 15.4") still suffers from this issue
Safari on Windows (5.1.7) does not suffer from this bug
Safari Version 6.0.2 (7536.26.17) on Lion 10.7.5 (Macbook Air Mid 2011) does not suffer from this bug
There are a few different ways of experimenting with reducing the flickering. The big problem however, it's that they seem to be "hit and miss". So you got to try a few to see which one helps resolve the issue.
But they center around the same few things:
-webkit-transform: translateZ(0); /* triggers GPU, sometimes fixes the issue */
transform: translateZ(0); /* non-webkit specific */
If this doesn't quite do the trick, try:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
If this also fails, try this:
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
You can read about each one of them through the W3C. But they have all worked for me on different circumstances with not fluid animations, and flickering ones, including some very odd ones, a lot jumpier than your fiddle.
They would go in the div being animated.

Alternative to CSS3 transform: rotate(xdeg) in CSS2 or Javascript to rotate text

My problem is that I use a html to pdf generator (acts_as_flying_saucer) that support CSS2 and javascript but not css3 so I can't use the transform: rotate(-90deg) (of course with different engines like webkit and stuff).
I tried PDFKit and Wicked_pdf but they didn't have full CSS2 support whereas I needed the position: fixed to set my footers on all pages to the bottom of the page.
SO my question is if there is a way to get vertical text with either CSS2 and / or Javascript /JQuery? CSS3 is out of the question unfortunately. :(
In IE the writing-mode is available.
<span style="writing-mode: tb-rl;">CSS2?</span>
See more info: http://msdn.microsoft.com/en-us/library/ms535153%28v=vs.85%29.aspx
No it's not possible without rotate. I don't know just crazy idea using canvas.
http://jsfiddle.net/LBsuQ/

jQuery Radial Menu Malfunctioing in Safari and IE8

I'm using Nirvana Tikku's Jquery Radial Menu Plugin on this page.
The animation works very nicely in IE9, FF, and Chrome. It doesn't work, however, in IE8 or Safari (5). Making matters more challenging, each of these browsers malfunctions in a different way. (Of course, that's not all that surprising.)
In IE8, the curved trapezoids aren't positioning themselves properly by default. Otherwise, the animation works just fine. This leads me to believe the issue has its roots in some quirky, IE8 CSS issue.
Safari, on the other hand, cannot seem to process the Jquery function properly. The menu displays properly initially. However, each click sends the trapezoids scattering.
Only the "keystone" trapezoid displays properly at all times.
I've posted some screenshots here, in case they're helpful: http://dl.dropbox.com/u/9534659/screenshots.zip
Any tips would be most appreciated.
UPDATE (1/25/12)
I have the animation working on all browsers save the Windows version of FF and IE8. (It works fine in the Mac version of FF.)
Any additional suggestions would be most appreciated.
Try to add it to the class .radial_div_item in css this: -webkit-transition:all .1s ease-in-out;

Categories