www.webdeveloper.com
Results 1 to 4 of 4

Thread: why the matrix filter does not work in ie

Hybrid View

  1. #1
    Join Date
    Mar 2011
    Posts
    6

    why the matrix filter does not work in ie

    This is a post first posted at stackoverflow,but I got no answer,so I post it here,once get an solution,I will post it at stackoverflow.

    I try to rotate the elment in ie, so I use the matrix filter,html:

    HTML Code:
    <div id="car" style="position: absolute; width: 52px; height: 26px; -moz-transform: rotate(45deg); left: 20px; top:206px; z-index: 1000;">
        <img src="http://i.stack.imgur.com/dcwtR.png" />
    </div>
    Then add the filter:

    Code:
            var a=document.getElementById("car"),b=45;
            a.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand")';
            var e = Math.cos(b * Math.PI / 180),
            c = Math.sin(b * Math.PI / 180),
            g = a.filters.item(0);
            g.M11 = g.M22 = e;
            g.M21 = -c;
            g.M12 = c;
    Then the div is rotated, but there are a black outline around the image.

    JsFiddle

    Note the black outline:Jj3Rd.png

  2. #2
    Join Date
    Mar 2011
    Posts
    1,137
    Just a guess, but it could be due to the fact that the image is a .png. If the black outline is actually transparent in the original image, you could be seeing an artifact of Microsoft's original .png image handler which didn't do well with .png transparency as I recall. You might try converting the image to .gif as a test.

    Does the image need to rotate dynamically? You could use software on the server to handle the rotation on demand. It would be slower than JavaScript alone, but it would be more reliable.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2011
    Posts
    6
    Does the image need to rotate dynamically?
    Yes.

    We have to change the rotatation according to the data by server.

    You can find some details about our application here;

  4. #4
    Join Date
    Mar 2011
    Posts
    1,137
    If I understand correctly, you're creating an interactive map where the map is overlaid with an image of a car and both images get updated as needed. While you could continually update both elements from their respective servers, I'd be inclined to create a set of images of the car - each one showing the car at a different angle of rotation. You could then pre-load the set of images in the browser and simply change the 'src' property of the image with JavaScript as desired with no load on the server or the Internet connection, and no browser issues. Is that possible with your implementation?
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles