IE8 / R2.0.1 - viewbox scaling

[ghost]

In ie8 and Raphael 2.0.1, setting viewbox does not scale bbox values, cloned shapes or glows.

In the example below, all rects should be the same size and position, but are not:

var paper = Raphael("canvas", 100, 100);
var rect = paper.rect(10, 10, 10, 10);
paper.setViewBox(0, 0, 50, 50)

paper.rect(10, 10, rect.getBBox().width, rect.getBBox().height).
    attr("stroke", "red");
rect.clone().
    attr("stroke", "blue");
rect.glow()

[a-r-m-i-n]

Here this example in jsfiddle: http://jsfiddle.net/3nDpx/2/

[escobar5]

Same thing here, I get strange behaviors in IE < 9 when using setViewBox

[Burkazoid]

I too am seeing some weird behaviour with IE8 and the viewbox which results in serious breaking of the application I'm building with RaphaelJS.

Here's a demonstration of the bug (JSFiddle is giving me issues so posted it on my own web space):
http://www.burkazoid.com/other/raphael/1.html

When clicking the "next" button, the square should not move (and doesn't on FF, IE9, Chrome); however, if you try it in IE8 (or even IE9 in IE8 mode) you will see the square move and scale the second time the viewbox is set, even though it is set to the same values.

[Burkazoid]

I have a fix (or rather a workaround) for some of the viewbox issues in IE6-8 (unsure if it solves these problems specifically, have not tested glows). Not sure why it's occurring exactly but after the viewbox is first set, the transformation seems to pass the first viewbox's transform IN ADDITION to the current viewbox each time.

My fix essentially stores the first viewbox transformation and checks if tstr is the same as it, and if so, ignores it. Changes are as follows for Raphael 2.0.2 - all changes refer to raphael.js:

Replace line 4990:

vbt = vbs ? "s" + [vbs.scale, vbs.scale] + "-1-1t" + [vbs.dx, vbs.dy] : E,

with (note commas in second string to allow for comparison between tstr and vbt):

vbt = vbs ? "s" + [vbs.scale, vbs.scale] + ",-1,-1t" + [vbs.dx, vbs.dy] : E,

Replace line 4995:

R._extractTransform(this, vbt + tstr);

with

if (!this.fvb && vbt != "") {
  this.fvb = vbt;
}
var trsfrm = vbt + tstr;
if (this.fvb && tstr == this.fvb) {
  trsfrm = vbt;
}

R._extractTransform(this, trsfrm);

At the bottom of setFillAndStroke VML function (around line 7500 for me), directly before:

  // res.paper.canvas.style.display = E;
},
addGradientFill = function (o, gradient, fill) {...}

add:

if (o.type == "image") {
  o.transform("...");
}

(Fix updated 23 Aug 2013 to take corrections on board - still works with Raphael 2.1.1.)

[benfoxall]

@jamesburke-examtime thanks for this - not really sure where it stands on the fix/workaround, though it did solve some viewbox issues that I was having.

[jamesdh]

jamesburke-examtime thanks for the fix!!! You should submit a pull request containing it :)

[jamesdh]

FYI, this fix still works for Raphael 2.1.0, the current version available from raphaeljs.com as of the date of this comment.

[jamesdh]

It appears jamesburke-examtime's patch (I can't @ reply him because the dash in his username causes GitHub to complain) may have been a bit overzealous. Particularly the removal of the this.type == "image" check. When removing that check images appear almost as a sort of tiled background, and when using setViewBox to shift the paper they wouldn't transform correctly, but instead you'd sort of just see the background tiles.

Adding it back in but retaining all of your other changes, everything seems to work as desired.

Again, this is in Raphael 2.1.

[Burkazoid]

jamesdh Apologies for that - my app used to use images so I'm pretty sure I did that for a reason, though I can't remember at this point. Perhaps a change in 2.1 renders this change breaking.

Anyway, thanks for the heads up.

[guirreri]

Can someone provide a minified Raphael 2.1 version with this fix?

[mattcroberts]

What is the status of this issue?

I am having problems with viewbox in ie8 and would prefer not to revert to an older version of raphael.

[looseend]

We're sufferening from this issue in 2.1 as well, is it likely to be fixed in a future release?

[Burkazoid]

@looseend

I'm not sure where it stands on the official repo, but I've forked the latest v2.1.1 and changed the necessary lines of code. The fork is here: https://github.com/ExamTime/raphael - the js file specifically is here: https://github.com/ExamTime/raphael/blob/master/vendor/assets/javascripts/raphael.js

[Burkazoid]

I just found another change I needed to make to fix image dragging in IE8/VML... At the bottom of setFillAndStroke VML function, directly before:

        // res.paper.canvas.style.display = E;
    },
    addGradientFill = function (o, gradient, fill) {...}

(around line 7500 for me)
I added:

        if (o.type == "image") {
          o.transform("...");
        }

I've updated my earlier comment to include this fix as well as @jamesdh's correction.

My fixed version of Raphael 2.1.1 is here: https://github.com/ExamTime/raphael/blob/master/vendor/assets/javascripts/raphael.js

[tomasAlabes]

Guys could you give me feedback about this possible fix/hack?
/dev/raphael.vml.js:576

// Needed to fix the vml setViewBox issues
    elproto.auxGetBBox = R.el.getBBox;
    elproto.getBBox = function(){
      var b = this.auxGetBBox();
      if (this.paper && this.paper._viewBoxShift)
      {
        var c = {};
        var z = 1/this.paper._viewBoxShift.scale;
        c.x = b.x - this.paper._viewBoxShift.dx;
        c.x *= z;
        c.y = b.y - this.paper._viewBoxShift.dy;
        c.y *= z;
        c.width  = b.width  * z;
        c.height = b.height * z;
        c.x2 = c.x + c.width;
        c.y2 = c.y + c.height;
        return c;
      }
      return b;
    };