-webkit-transform:rotate() produces an inexplicable square unrelated to the element the CSS is applied to

Question

I have two icons which each have their own hover effects—one spins on the Y axis and the other spins on the Z axis, based on the following CSS:

img.icon {
    width:20px;
    vertical-align:text-top;
    transition:all 0.5s ease;
}
img.flip:hover {
    transform:rotateY(720deg);
    -webkit-transform:rotateY(720deg);
    -moz-transform:rotateY(720);
    -o-transform:rotateY(720deg);
}
img.spin:hover {
    transform:rotateZ(360deg);
    -webkit-transform:rotateZ(360deg);
    -moz-transform:rotateZ(360);
    -o-transform:rotateZ(360deg);
}
img.grow:hover {width:50px;}

The relevant HTML markup is fairly straightforward as well:

<img src='settings.png' class='icon flip'>
<img src='search.png' class='icon spin grow'>

For some reason, the latest versions of both Chrome and Opera both produce a small white rectangle at a location on the page that is unrelated to the elements being manipulated. (In fact, it's unrelated to any element on the page!) The rectangle doesn't appear in Firefox or IE, and I don't want it to appear anywhere—I just can't figure out where it's coming from.

Here's the working page: http://goo.gl/fHuyQe

This is one of my first forays into real CSS transform effects, so any help is greatly appreciated!

Answer 1

It is a part of this div

<div id="info_div"></div>

you have used overflow-y:scroll and it is the scrollbar that appears. Also I see you have used visibility:hidden to hide it. What is happening is that the div is invisible but somehow is still exists. Somehow hovering over settings icon increases it's height triggering scrollbar to appear. Use display:none. It is more preferable when you want anything hidden. Using display:none makes the problem go aways.