css - 图像/SVG 和 Chrome 的旋转/裁剪问题

Question

我正在尝试旋转 svg 并遇到 Chrome(版本 36)的问题，旋转的图像被剪裁。

http://jsfiddle.net/7ehkdufj/5/

var rotation = 0;
$('#rotate').on('click', function() {
    rotation = (rotation + 60) % 360;
    $('.piece').css('transform', 'rotate(' + rotation + 'deg)');

});
$('#reverse').on('click', function() {
    rotation = (rotation - 60) % 360;
    $('.piece').css('transform', 'rotate(' + rotation + 'deg)');

});

当我使用前面的代码旋转图像时，有时会被剪裁(在 jsfiddle 示例中，它发生在 90 度和 270 度旋转时)。如果我使用“反向”旋转，那么我看不到任何剪裁。当图像被裁剪后，当我点击它时它会自行“修复”。我认为这与刷新屏幕有关。

有没有人见过这个问题？有某种解决方法吗？

更新:

添加一个简短的过渡似乎可以弥补或隐藏问题:

-moz-transition: all 0.01s ease;
-webkit-transition: all 0.01s ease;
-o-transition: all 0.01s ease;
transition: all 0.01s ease;

Answer 1

尝试在每个旋转函数的末尾添加:

var x = document.documentElement.scrollTop; //firefox responds to this, but chrome doesn't
if (x === 0) { //if x is 0 then we have to check if we are in chrome
    x = document.body.scrollTop; //chrome responds to this, but firefox doesn't
}
window.scrollTo(0,(x+5)); //scrolls from current position down 5px
window.scrollTo(0,x); //then back up

这会强制刷新屏幕。

编辑:我在版本 36.0.1985.125 m 中执行此操作。我以前没有在图像上看到任何裁剪，但在 svg 上看到了。