Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Xlink:href svg disappear bug in IE11 and below

See original GitHub issue

Vue.js version

1.0.26

Reproduction Link

http://vue-xlink-ie-bug.handcraft.com/index.html

Steps to reproduce

Load the page. As soon as vue is activated, the arrow-down svg icon inside the <button> disappears on IE11 and below.

What is Expected?

I expect the icon to remain. This behaviour is correct in browsers such as chrome, edge or firefox.

What is actually happening?

The icon is a xlink:href svg icon that vue is trying te re-render, which for some reason fails.

I know of an ugly workaround, which is:

<use xlink:href="#icon-angle-down" v-bind="{ 'xlink:href': '#icon-angle-down' }"></use>

However, this should not be required to render xlink:href svg’s.

Source:

<html>
<head>
        <title>sdffsdfsd</title>
</head>
<body>
  <div id="site">
    <div @click="counter++">
      {{counter}}
    </div>
    <main>
      <button>
         hallo
         <svg><use xlink:href="#icon-angle-down"></use></svg>
      </button>
    </main>
  <div>

    <svg style="display: none;">
      <symbol viewBox="0 0 1792 1792" id="icon-angle-down"><title>angle-down</title><path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10L407 759q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path></symbol>
    </svg>
  </div>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
<script>
new window.Vue({
  el: '#site',
  data: function() {return {counter: 0};}
})
</script>
<style>
        button {
  position: relative;
  padding-right: 40px;
}
svg {
    height: 18px;
    width: 18px;
    fill: currentColor;
    position: absolute;
    right: 10px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
</style>
</body>
</html>

Issue Analytics

State:
Created 7 years ago
Comments:11 (3 by maintainers)

Top GitHub Comments

6reactions

fergaldoylecommented, Jul 4, 2016

<use> is very buggy in Internet Explorer. If vue is detaching elements and moving them around in the DOM, all <use> svgs that are children of the moved elements will be lost, see here for example:

http://codepen.io/anon/pen/NAgRVm?editors=1010 An element with an svg icon is simply moved to another, using appendChild. In IE the icon disappears where as in other browsers it remains. This is not something vue could do anything about I’d imagine.

One ‘solution’ for you it to use a string template or script tag template, but that will only solve your current issue. There’s many times, e.g. list rendering, where vue will use appendChild meaning you will face the same issue.

Ideally you would have an <icon name="icon-angle-down"> component which injects the full svg code of a given icon instead of using <use>. This will work much better in IE.

5reactions

nino-vrijmancommented, Jan 10, 2019

Using href instead of xlink:href did the trick for me.

Top Results From Across the Web

Is there a cross-browser workaround to missing support for ...

I've ran into what I think is this bug in IE11/Edge. Here's some SVG to repro it: <svg xmlns="http://www ...

IE 11 Bug with Dynamic SVG Elements? - MSDN - Microsoft

The application gets to a state where elements will no longer accept mouse or keyboard events nor will it show hover styles however...

Svg As Source In Tag Not Displaying In Internet Explorer 11

More specifically it is due to using svg.innerHTML '<use xlink:href'+xlinkhref+'></use>'; in UISvGRenderer.js to load the svg. We've found in Microsoft.

visualforce - SVG icon disappears after rerendering - why?

This is the why part of this question: Lightning design system - SVG disappears after rerender. The below code should be able to...

hover in a SVG, foreignobject - HTML & CSS - SitePoint Forums

I have a SVG like <svg id="Layer_1" data-name="Layer 1" ... foreignObject contains links, as it will disappear when the