1340438 - SVG elements shift when performing a rotation with absolute transform-origin

Status: RESOLVED DUPLICATE of bug 1561225

(Core :: SVG, defect, P3)

Description

[Paul LeBeau]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Steps to reproduce:

1. Try the following link (or see demo see files below) https://jsfiddle.net/n9v54nro/2/

2. Hover over red rectangle



Actual results:

"Door" jumps downwards by one unit before rotating


Expected results:

"Door" should rotate around transform origin (green dot).  This test case works correctly in Chrome.


===== Demo files =======

  <svg width="500" height="500" viewBox="105 125 20 20" id="svg">
    <g id="ground">
      <!-- ROOM OUTLINE -->
      <path class="o-whole" d="M 108.5,120 v 10" />
      <!-- ROOM FILL -->
      <rect id="g-f-construction-shop" class="f" width="109" height="200"/>
      <!-- DOOR -->
      <path
         id="g-o-construction-shop-stage-one-door-right-top"
         class="door o-door-right-top"
         style="transform-origin:108.5px 130.5px;"
         d="m 108,130.5 h 5.99996"
      />
      <circle cx="108.5" cy="130.5" r="0.2" fill="limegreen"/>
    </g>
  </svg>


var room = document.getElementById('g-f-construction-shop');

room.addEventListener('mouseenter', function animateDoors() {
  var doorElement = document.getElementById('g-o-construction-shop-stage-one-door-right-top');
  doorElement.style.transform = 'rotate(90deg)';
    
  setTimeout(function () {
    doorElement.style.transform = 'rotate(0)';
  }, 750);
});


.o-whole, .door {
  stroke: #000;
  fill: none;
  opacity: 1;
}
  
.f {
  fill: #ff6600;
  opacity: 0.1;
}
  
.o-door-right-top {
  transition: transform 0.75s;
}

Comment 1

[Robert Longson [:longsonr]]

The animation is unnecessary. The difference is between 

doorElement.style.transform = 'rotate(0deg)';

and

doorElement.style.transform = 'none';

Comment 2

[Robert Longson [:longsonr]]

https://www.w3.org/TR/css-transforms-1/#svg-transform-functions suggests that rotate potentially messes with the transform-origin so maybe the transform-origin is being overwritten for SVG content somehow? For SVG content the transform-origin default is 0, 0, which is different to html.

Comment 3

[anthony_falez]

it's noteworthy to point out that vertical paths shift horizontally, and vice-versa; thus horizontal paths shift vertically.

from my own experience, vertical paths always shift to the right, and horizontal paths always shift downwards. also, i'm fairly certain that they shift by HALF A UNIT, not a whole unit.

Comment 4

[anthony_falez]

here is an elaborate jsfiddle to demonstrate the direction of shifting: https://jsfiddle.net/tygeonnm/

Comment 5

[anthony_falez]

@Jet Villegas I'm assuming P3 is the priority level? What are the diff levels?

Comment 6

[violet.bugreport]

The cause is a decimal value in the path 130.5 during animation, the problem disappears if it's an integer.

This is essentially a dup of Bug 1561225. Without WebRender, it's easy to fix; but the WebRender is much worse, it seems as if a filter is applied from nowhere.