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

Issue #14672750 • Assigned to James M.

Details

Author
André R.
Created
Nov 15, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
  • Chrome
  • Firefox
Reports
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): https://bugs.chromium.org/p/chromium/issues/detail?id=784435

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ändlerportal.app.navigate(‘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>
</div>

</div>

/* 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.

Attachments

0 attachments

    Comments and activity

    • Please follow these instructions to reproduce the bug on the actual site: https://bugs.chromium.org/p/chromium/issues/detail?id=784435#c2

    • 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

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

    Sign in