Xlink:href svg disappear bug in IE11 and below #3195
Description
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>