SVG hover animations fail when SVG elements are detached and attached to the DOM at runtime under certain conditions

By design Issue #14672750


André R.
Nov 15, 2017
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
  • Chrome
  • Firefox
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Steps to reproduce:

On my page, I’m using Knockout to show or hide navigation elements, which are based on inline SVG graphics. Elements show up, according to if the user is logged in or not.

After I enable a control via Knockout, only the background hover animation doesn’t work anymore. Sporadically, the controls stay white altogether. Then only the icon appears after hovering over their designated position.

Please also watch my identical Chromium bug (similar behavior):

My setup looks like this:

<div class="layout-toolbar" data-bind="dxToolbar: { items: Händlerportal.navbarItems }"
data-options="dxCommandContainer : { id: ‘generic-header-toolbar’ }">
<div class="toolbar-button" data-options="dxTemplate : { name: ‘welcome-button’ } " onclick="Hä‘menu/welcome’)" title="Herzlich willkommen auf dem Lechner Händlerportal.">
<svg viewBox="0 0 19 19.1"><defs><radialGradient id="bwe" cx="-1033" cy="618" r="304" gradientTransform="matrix(.101 0 0 .00817 151 1086)" gradientUnits="userSpaceOnUse"><stop stop-color="#808080" offset="0" /><stop stop-color="#cdcdcd" offset=".499" /><stop stop-color="#fff" offset="1" /></radialGradient><linearGradient id="bwg" x1="546" x2="546" y1="292" y2="802" gradientTransform="matrix(.135 0 0 .135 -25 983)" gradientUnits="userSpaceOnUse"><stop stop-color="#e6e6e6" offset="0" /><stop stop-color="#999" offset="1" /></linearGradient><linearGradient id="bwf" x1="505" x2="505" y1="359" y2="779" gradientTransform="matrix(.135 0 0 .135 -25 983)" gradientUnits="userSpaceOnUse"><stop stop-color="#666" offset="0" /><stop stop-color="#fff" offset="1" /></linearGradient><radialGradient id="bwd" cx="-522" cy="-305" r="351" gradientTransform="matrix(-.106 .105 -.0933 -.0941 -37.4 1065)" gradientUnits="userSpaceOnUse" xlink:href="#bwa" /><linearGradient id="bwa"><stop stop-color="#fff" offset="0" /><stop stop-color="#fff" stop-opacity="0" offset="1" /></linearGradient><radialGradient id="bwc" class="button-background" cx="-24.2" cy="-163" r="49.5" gradientTransform="matrix(.499 0 0 .499 58.7 1142)" gradientUnits="userSpaceOnUse"><stop stop-color="#008033" offset="0" /><stop stop-color="#008033" offset=".845" /><stop stop-color="#008033" offset=".954" /><stop stop-color="#052" offset=".984" /><stop stop-color="#002b11" offset="1" /></radialGradient><radialGradient id="bwb" cx="518" cy="294" r="166" gradientTransform="matrix(-.197 .197 -.191 -.191 205 983)" gradientUnits="userSpaceOnUse" xlink:href="#bwa" /></defs><g transform="translate(-1.56 -176)“><g transform="matrix(.282 0 0 .282 -2.07 -114)“><path d="m77.2 1091c0 1.37-13.7 2.48-30.6 2.48-16.9 0-30.6-1.11-30.6-2.48 0-1.37 13.7-2.48 30.6-2.48 16.9 0 30.6 1.11 30.6 2.48z” fill="url(#bwe)" /><path d="m76.8 1060c0 16.6-13.5 30.1-30.1 30.1-16.6 0-30.1-13.5-30.1-30.1s13.5-30.1 30.1-30.1c16.6 0 30.1 13.5 30.1 30.1z” fill="url(#bwg)" /><path d="m72 1060c0 14-11.4 25.4-25.4 25.4-14 0-25.4-11.4-25.4-25.4s11.4-25.4 25.4-25.4c14 0 25.4 11.4 25.4 25.4z" fill="url(#bwf)" /><path d="m24.4 1051c3.73-8.54 12.2-14.5 22.2-14.5 9.97 0 18.5 6.03 22.2 14.6-11.7 4.79-33.2 4.94-44.4-.129z" fill="url(#bwd)" opacity=".6" /><path d="m71.3 1060c0 13.6-11 24.7-24.7 24.7-13.6 0-24.7-11-24.7-24.7 0-13.6 11-24.7 24.7-24.7 13.6 0 24.7 11 24.7 24.7z" fill="url(#bwc)" /><path d="m69.1 1060c0 12.4-10.1-5.33-22.5-5.33s-22.5 17.7-22.5 5.33 10.1-22.5 22.5-22.5 22.5 10.1 22.5 22.5z" fill="url(#bwb)" opacity=".8" /><path d="m57.5 1044c-.82 0-1.48.245-1.48.557v5.11l-8.64-4.99c-.243-.143-.51-.202-.769-.186h-.0101-.122c-.22 0-.442.084-.647.186l-14.9 8.58c-.656.38-.878 1.22-.499 1.87.379.65 1.21.878 1.87.498l14.3-8.24 14.3 8.24c.656.38 1.49.152 1.87-.498.379-.658.155-1.49-.501-1.87l-3.27-1.89v-6.82c0-.312-.662-.557-1.48-.557zm-10.9 4.12-14.1 8.11v16.4c0 .582.416 1.05.935 1.05h3.22v-14.1c0-.489.143-.878.322-.878h8.12c.179 0 .289.388.322.878v14.1h14.2c.519 0 .937-.464.937-1.05v-16.4zm3.49 10.6h5.77c.246 0 .445.194.445.439v5.77c0 .245-.199.447-.445.447h-5.77c-.246 0-.445-.202-.445-.447v-5.77c0-.245.199-.439.445-.439z" fill="#fff" /></g></g></svg>


/* Buttons */
.toolbar-button {
display: inline-block;
cursor: pointer;

.toolbar-button svg {
    width: 72px;
    height: 72px;

#account-info-buttons .toolbar-button svg {
width: 32px;
height: 32px;

.toolbar-button svg stop, .toolbar-button svg path {
transition: .5s;

.toolbar-button svg:hover .button-background stop {
stop-color: #fd0;

.toolbar-button svg:hover .button-background stop:nth-last-child(2) {
    stop-color: #a89200;

.toolbar-button svg:hover .button-background stop:last-child {
    stop-color: #574b00;

.toolbar-button svg:hover path:last-child {
fill: #1d1d1b;

Actual results:

  1. After attaching an element to the DOM via Knockout, the hover animations don’t work.
  2. Sporadically, the elements don’t show up at all, but only, if you hover the mouse cursor over them.

Expected results:

  1. The hover animation should work after (re-)attaching an element to the DOM.
  2. The background/static part of the SVGs should never disappear.


0 attachments

    Comments and activity

    • Please follow these instructions to reproduce the bug on the actual site:

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

    • Hello,

      Thank you for providing this information about the issue. We cannot replicate the second issue in Edge, but we did see it happen in Chrome. We will disregard that problem, but feel welcome to open a second case for that specific issue if you have more information.

      We are able to replicate the first issue in Edge and every other browser, so we will need to have a reduced code sample to address the problem. We will keep this case open until we have more insight on the first issue. Please do keep us updated on any new development with the case.

      Best Wishes,
      The MS Edge Team

    • Hello,

      The modified page at no longer works and now we get a 404 error page. Please let us know if you still need help with this issue, any new insight you have on the problem, and the current link and login information.

      Best Wishes,
      The MS Edge Team

    • Thank you, but I already fixed the issue by myself. The problem was the way knockout handled setting the buttons visible or invisible. The way I did it before, it created multiple DOM entries with the same ID. Browsers didn’t like that. I changed the way of setting the buttons invisible and now it works.

    • Hello,

      Thank you for sharing your problem and solution. We look forward to further feedback you have on the Edge browser.

      Best Wishes,
      The MS Edge Team

    • Microsoft Edge Team

      Changed Status to “By design”

    You need to sign in to your Microsoft account to add a comment.

    Sign in