0

I'm trying to rotate an svg and running into an issue with Chrome (version 36) where the rotated image is clipped.

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)');

});

When I use the previous code to rotate the image sometimes gets clipped (in the jsfiddle example it happens on 90 and 270 degree rotations). If I use the 'reverse' rotation then I don't see any clipping. When the image is clipped it will "fix" itself when I click on it. I think it has something to do with refreshing the screen.

image with clipping image with no clipping

Has anyone seen this issue before? Is there some type of workaround?

Update:

Adding a brief transition seems to compensate or hide the issue:

-moz-transition: all 0.01s ease;
-webkit-transition: all 0.01s ease;
-o-transition: all 0.01s ease;
transition: all 0.01s ease;
nimblegorilla
  • 1,183
  • 2
  • 9
  • 19

2 Answers2

1

Try adding to the end of each rotation function:

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

This forces a screen refresh.

Edit: I did this in Version 36.0.1985.125 m. I did not previously see any clipping on the image but did on the svg.

J148
  • 576
  • 1
  • 4
  • 17
  • I tried adding that to the rotate button and it didn't seem to change anything: http://jsfiddle.net/7ehkdufj/8/ – nimblegorilla Aug 10 '14 at 20:07
  • Hmm, that fiddle works perfectly for me. What version of Chrome are you using? More importantly, have you tried this code on other computers? I noticed that even clicking on my desktop would resolve the clipping issue. The problem may be with your GPU or video card. – J148 Aug 10 '14 at 20:12
  • Oh, I'm also on Win 7. Might make a difference. – J148 Aug 10 '14 at 20:17
1

New bug with Chrome v36 and SVG. Try adding width=80 and height=80 to your SVG declaration. Think with rotation, one of the edges was clipped. Also remove the CSS line .hex { height: 80px; width: 80px; float: left; }

< svg version="1.1" viewBox="0 0 760 760" xmlns="http://www.w3.org/2000/svg" 
    id="base_hex" width="80" height="80" >

Note: scrollTop() aint a good way to bypass it. It still appeared on Win7 Chrome v36

Alvin K.
  • 4,329
  • 20
  • 25
  • Have a haunch that Chrome doesn't like `.container {...}` declaration. FF is OK but not IE9, no clipping but rotation is off-centered. – Alvin K. Aug 10 '14 at 23:16