2

The goal is to rotate a div which is populated with "tiles" - which are adjacent image elements, with their locations set with the style properties top and left.

This works as expected in webkit enabled browsers (Chrome/Safari): http://jsfiddle.net/Yt99J/52/

<html>
    <head>
    <title>Rotating div of adjacent elements</title>
    </head>

    <body>
        <div id="canvas" style="overflow: visible; position: absolute; -webkit-transform: translate3d(0px, 100px, 0px) rotate3d(0, 0, 1, 0deg);">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
        </div>

        <div id="canvas_rotated" style="overflow: visible; position: absolute; -webkit-transform: translate3d(400px, 50px, 0px) rotate3d(0, 0, 1, 45deg);">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
        </div>
    </body>
</html>​

However, for non webkit browsers, when an image is rotated to an angle which is not a multiple of 90 degrees, there is a 1 pixel gap between tiles. I'm assuming this is due to some rounding error at the lowest level inside the browser. Is there any way to work around this problem, other than scaling the tiles by a function of their size to make up the gap (I would like to avoid doing this if possible). Here is an example of the bug, as implemented in FireFox: http://jsfiddle.net/Yt99J/50/

<html>
    <head>
    <title>Rotating div of adjacent elements</title>
    </head>

    <body>
        <div id="canvas" style="overflow: visible; position: absolute; -moz-transform: translate(0px, 100px) rotate(0deg);">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
        </div>

        <div id="canvas" style="overflow: visible; position: absolute; -moz-transform: translate(400px, 50px) rotate(45deg);">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 0px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:0px;" src="http://oi47.tinypic.com/15zjdky.jpg">
            <img galleryimg="no" style="display: block; position: absolute; width: 100px; height: 100px; top: 100px; left:100px;" src="http://oi47.tinypic.com/15zjdky.jpg">
        </div>
    </body>
</html>
WellHydrated
  • 51
  • 4

1 Answers1

1

To anyone that was wondering, looks like this is a quirk of some browsers. FireFox seem to be in the process of fixing this: https://bugzilla.mozilla.org/show_bug.cgi?id=504071

Hopefully IE and other browsers follow suit. This issue really sucks for mapping web apps.

WellHydrated
  • 51
  • 4
  • Take a look at my [SO Question](http://stackoverflow.com/q/10735259/1195891) with an Answer that I accepted. Perhaps this is a workaround for you until this issue is resolved. P.S. If your happy with your own answer, please accept it. – arttronics Dec 07 '12 at 01:51