我正在尝试旋转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;
最佳答案
尝试在每个旋转函数的末尾添加：
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上却看到了。