延迟更改溢出：显示溢出：隐藏以在Chrome中生效

Question

我有一个包含一堆我不想泄漏的元素的div，但其中一个元素是我想在悬停时放大的图像（与父div的宽度相同）。但是当我改变溢出时：在悬停时隐藏到可见，它在Chrome中表现得非常奇怪。

HTML：

<div class="ruiner">
    <img src="wwwwwww">           
</div>

CSS：

.ruiner {
    overflow:hidden;
}

.ruiner:hover {
    overflow:visible
}

img:hover{
    transform:scale(1.5,1.5);
}

请检查this jsfiddle以查看我的意思。

有没有人知道如何在Chrome中完成这项工作？