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

Question

我有两个图标，每个图标都有自己的悬停效果——一个在 Y 轴上旋转，另一个在 Z 轴上旋转，基于以下 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;}

相关的 HTML 标记也相当简单:

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

出于某种原因，Chrome 和 Opera 的最新版本都会在页面上与正在操作的元素无关的位置产生一个白色的小矩形。 (事实上​​，它与页面上的任何元素都无关!)该矩形不会出现在 Firefox 或 IE 中，我也不希望它出现在任何地方——我只是想不出它是从哪里来的。

这是工作页面:http://goo.gl/fHuyQe

这是我第一次尝试真正的 CSS 转换效果，所以非常感谢任何帮助!

Answer 1

它是这个div的一部分

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

你已经使用了overflow-y:scroll，它是出现的滚动条。我还看到您使用了 visibility:hidden 来隐藏它。发生的事情是 div 是不可见的，但不知何故仍然存在。以某种方式将鼠标悬停在设置图标上会增加它的高度，从而触发滚动条出现。使用 display:none。当您想要隐藏任何东西时，它更可取。使用 display:none 可以解决问题。