jQuery Rotate - IE7 & IE8 Issues

Question

I am using Jquery Rotate to rotate an image around a meter, and it works great but in IE7 and IE8 it gets pushed up about 200 pixels and has a black stroke/border around the image.

I am using jQueryRotate3.js which has it working, but the position is off, and not sure where the black border is coming from?

JS:

            var start = 0;
        // Sets the Value of the City for now   
            var angle = 1 + Math.floor(Math.random() * 180);

            $("img.pointer").rotate({
                 angle: start,
                 animateTo: angle,
                 easing: $.easing.easeInOutSine
            })

HTML:

<div class="city-details">
   <div class="details">
     <img class="pointer" src="http://demo.omnigon.com/christian_bovine/shamelesscity/images/pointer.png" alt="" />
    </div>
</div>

You can see the code here: http://jsfiddle.net/xtian/6gcS8/1/

I would really like to get this working in IE7 and IE8.

That looks like the plugin `jQueryRotate3.js` is doin something funky because if you comment out your JS the position is fine — Ronnie, Dec 07 '12 at 22:59
IE9 < has problems with filter and PNGs (it's not only IE6), the black border happens because of the alpha channel. You may use a 8bit PNG or a gif, it would work. — pocesar, Dec 07 '12 at 23:14

score 5 · Accepted Answer · edited May 23 '17 at 11:43

jsFiddle DEMO

I looked into the jQuery Rotate v3.1 script your using and it's sparse with just the minimal it needs to get the job done for IE, which is nice considering.

Just include two CSS rules for top and left, based on your margin-top and margin-left values to have it working in IE series of non CSS3 browsers.

Example:

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    top: 211px;
    left: 48px;    
    margin: 211px 0 0 48px;
}

Note there is no need to set CSS position since this script sets it to absolute which over-rides anything you provide.

A method to fix the image black border issue in IE browsers is to set the background-color property to the value that matches the background... expect in your case you have 3 colors of blue along with white in the middle section... so that's not a good idea.

Instead, use the most common solution which is a PNG8 Filetype Image with Transparency, as discussed in this SO Answer.

Having used a PNG8 with alpha transparency, this approach, which normally solves transparency issues with IE, **does not work** in ie7/8. There are still black borders after rotation. — robert.egginton, Jun 25 '13 at 17:00

score 0 · Answer 2 · answered Dec 07 '12 at 23:07

I managed to get it working by removing the margin and setting placement with relative positioning like:

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    margin: 211px 0 0 48px;
}

to

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    position: relative;
    top: 218px;
    left: 50px;
}

I don't have ie7/8 installed but I this works with IE9 compatibility view settings, which showed the misplaced needle in the original fiddle (and it still behaves as expected in Chrome & Firefox).

Try this updated fiddle and let me know if you still have issues: http://jsfiddle.net/6gcS8/4/

score 0 · Answer 3 · edited May 23 '17 at 12:06

Doing stuff like rotation or fading in IE7/8 is always likely to have unwanted side effects because it's going beyond the standard capabilities of the browser. In every other browser it's dead easy, but for old IE your jQuery plugin is going to be doing some pretty hacky stuff to make it work. That hacky stuff may work in some cases, but tends to be very brittle and easily broken.

IE's rotation mechanism is very clunky. The described problem of the image being moved up 200 pixels sounds like the rotation centre point may be incorrect. This is something I've encountered a lot when trying to work with rotation in IE. I would have expected your jQuery plugin to deal with that transparently, but if it's getting it wrong then I'm not sure how you'd correct it without bypassing the plugin entirely or using a different image for IE that is 200 pixels taller or something like that.

Re the black border, this may possibly be an issue with handling the alpha channel on the PNG image. You may want to confirm this by using a GIF image instead (although it won't look as good).

But overall, my main recommendation is to avoid doing this kind of thing in old IE entirely. It's just got too many issues to make it worth the effort.

Looking at your jsFiddle example, it seems like you're doing this in order to draw and animate a speedometer-type gauge.

May I suggest an alternative approach which does away with the need to mess around with rotating DOM elements entirely.

There is a Javascript library called Raphael, which draws vector graphics. It works in all browsers, including old IE versions. It is very easy to draw a good looking speedo gauge using Raphael. In fact, I provided a 4-line JS script in another answer here on SO to do exactly that. See here: Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed). You could take that script, modify it to use your existing gauge background image, and bingo, a working speedo gauge in all browsers, without any of the bugs involved in trying to make IE do things is isn't designed for.

Hope that helps.

jQuery Rotate - IE7 & IE8 Issues

3 Answers3