title: Fabric.js: Properties of group members not updating after scaling
body: <p>I'm using Fabric.js to create a group of two rectangles that are lying next to each other. I want the left one to change it's color when I'm moving my mouse over it. Therefore I check if the position of the mouse-cursor is within the the boundary of the rectangle or not. 
  This works fine until I scale the group...
  I made a few tests and found out that the properties of the group members don't change. So while the rectangles become larger they still show their old sizes.
  This is my code:</p>
  
  <pre><code>farbicCanvas = new fabric.Canvas('c');
  
  farbicCanvas.on('object:scaling', function(e)
  {
     //Show the sizes
     console.log("group width: " + e.target.getWidth());
     console.log("rect1 width: " + e.target.item(0).getWidth());
     console.log("rect2 width: " + e.target.item(1).getWidth());
  });
  
  farbicCanvas.on('mouse:move', function(e)
  {
      if(e.target !== null)
      {
          point = new getMouseCoords(farbicCanvas, event);
  
          //Check if cursor is within the boundary of rect2
          if(point.posX &gt;= e.target.item(1).getLeft() + e.target.getLeft() + e.target.getWidth()/2 
          &amp;&amp; point.posX &lt;= e.target.item(1).getLeft() + e.target.getLeft() + e.target.getWidth()/2 + e.target.item(1).getWidth()
          &amp;&amp; point.posY &gt;= e.target.getTop() 
          &amp;&amp; point.posY &lt;= e.target.getTop() + e.target.item(1).getHeight())
          {
              e.target.item(1).set({ fill: 'rgb(0,0,255)' });
              farbicCanvas.renderAll();
          } 
      else
      {
        farbicCanvas.getObjects()[0].item(1).set({ fill: 'rgb(0,255,0)' });
        farbicCanvas.renderAll(); 
      }
    }
    else 
    {
      farbicCanvas.getObjects()[0].item(1).set({ fill: 'rgb(0,255,0)' });
      farbicCanvas.renderAll();
    }
  });
  
  var rect1 = new fabric.Rect(
  {
    left: 100,
    top: 100,
    width: 100,
    height: 75,
    fill: 'rgb(255,0,0)',
    opacity: 0.5
  });
  
  var rect2 = new fabric.Rect(
  {
    left: rect1.getLeft() + rect1.getWidth(),
    top: rect1.getTop(),
    width: 100,
    height: 75,
    fill: 'rgb(0,255,0)',
    opacity: 0.5
  });
  
  group = new fabric.Group([rect1, rect2]);
  farbicCanvas.add(group);
  
  function getMouseCoords(canvas, event)
  {
    var pointer = canvas.getPointer(event.e);
    this.posX = pointer.x;
    this.posY = pointer.y;
  }
  </code></pre>
  
  <p>I've also made a Fiddle: <a href="https://jsfiddle.net/werschon/0uduqfpe/3/" rel="nofollow noreferrer">https://jsfiddle.net/werschon/0uduqfpe/3/</a>
  If I make the group larger, my 'mouse-detection' doesn't work anymore, because the properties like <code>left</code>, <code>top</code> or <code>width</code> are not updating.
  What do I need to do, to update the properties? Or is there another way of detecting if the mouse-cursor is above the rectangle?</p>
  
  <p>Thanks.</p>