SVG wrong size on IE when has display: none property

[goesredy]

SVG size wrong when element has auto height and display none.
Try this fiddle on IE.
http://codepen.io/redy/full/gbQNMy/

[spenat28]

same here ... fix would be great ... i have workaround now, but it causes flashing of non bw image on modal open...

[goesredy]

Found a partial solution, but not sure if it will solve problem of anyone.
I think better to keep the image and make the svg in absolute position.
Change this :

switchImage: function(element) {
      var params,
          classes,
          template;

      params = this.getParams(element);

      classes = this.settings.fade ? this.settings.classes.fade : '';

      template = $(
        '<div class="grayscale grayscale-replaced ' + classes + '">' +
          '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + params.svg.width + ' ' + params.svg.height + '" width="' + params.svg.width + '" height="' + params.svg.height + '" style="' + params.svg.offset + '">' +
            '<image filter="url(&quot;#gray&quot;)" x="0" y="0" width="' + params.svg.width + '" height="' + params.svg.height + '" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="' + params.svg.url + '" />' +
          '</svg>' +
        '</div>');

      params.styles = this.setStyles(params.styles, params.svg.url, params.svg.width, params.svg.height);

      // TODO: Should this really set all params or should we set only unique ones by comparing to a control element?
      template.css(params.styles);

      this.addSVGFilterOnce();
      element.replaceWith(template);
    }
  });

to :

switchImage: function(element) {
      var params,
          classes,
          template;

      params = this.getParams(element);

      classes = this.settings.fade ? this.settings.classes.fade : '';

      template = $(
          '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + params.svg.width + ' ' + params.svg.height + '" width="100%" height="100%" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0; ' + params.svg.offset + '">' +
            '<image filter="url(&quot;#gray&quot;)" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="' + params.svg.url + '" />' +
          '</svg>');

      params.styles = this.setStyles(params.styles, params.svg.url, params.svg.width, params.svg.height);

      // TODO: Should this really set all params or should we set only unique ones by comparing to a control element?
      template.css(params.styles);

      this.addSVGFilterOnce();
      element.css('visibility', 'hidden').wrap('<div class="grayscale grayscale-replaced ' + classes + '" style="position: relative;"></div>').after(template);
    }
  });

[karlhorky]

@goesredy Your solution doesn't appear to work in this case: http://codepen.io/karlhorky/pen/MaWYoK

[karlhorky]

I took a quick look at this issue, and I believe elements that aren't visible when the page loads is something for the developer to find a solution for (see below). The issue is that the elements do not have a width and height, which the plugin uses to create the duplicate element for lesser browsers. It would be too unreliable to try to calculate these dimensions without the element being visible.

One way to work around this is to make the elements visible until the plugin has done its work. So in this case, adding an active class to all the items and then removing it again. I've also removed the auto-initialization of the carousel by removing the data-ride attribute and initializing it manually:

http://codepen.io/karlhorky/pen/XmWJMj