SVG hover animations fail when SVG elements are detached and attached to the DOM at runtime under certain conditions
Reported by
andrer...@gmail.com,
Nov 13 2017
|
|||||||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36
Steps to reproduce the problem:
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.
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;
}
Please watch the attached video to see what's going wrong. You can find the actual code of the page unter https://partner.lechner-ag.de
What is the expected behavior?
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.
What went wrong?
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.
Did this work before? No
Chrome version: 61.0.3163.100 Channel: stable
OS Version: 10.0
Flash Version:
Other browsers seem to have similar issues. The DevExpress team came to the following conclusion: "We've researched the issue and concluded that the issue is caused by the browser limitation when SVG elements are detached and attached to the DOM at runtime under certain conditions. To resolve the issue, add an extra radialGradient element and refer to it when your SVG is hovered over."
,
Nov 14 2017
@Vamshi: The error only appears after the user logs into the site. I've created a modified version of the page with fake login credentials. Please visit https://partner.lechner-ag.de/__hidden__ and enter any username and password. You will then be able to log in and the page should switch the navbar. Then, the background of the buttons should not become yellow anymore. Also, if you click around on various links on the page, the buttons might eventually disappear completely.
,
Nov 14 2017
Thank you for providing more feedback. Adding requester "vamshi.kommuri@techmahindra.com" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Nov 14 2017
,
Nov 14 2017
I can reproduce this with Version 64.0.3265.0 (Official Build) canary (64-bit) on Mac Retina. The yellow background does change immediately after logging in, but after some clicking the buttons do disappear and/or the yellow background returns. I'll try to reduce the case, but I strongly suspect this has something to do with url fragment resolution.
,
Nov 14 2017
,
Nov 14 2017
By the way, the error with the failing background animation also appears in the most recent Firefox (57). But the icons never disappear there. After some clicking, the issue seems to fix itself until the user logs in/out again. Microsoft Edge shows that same behavior. Could this be an error of my HTML/CSS/JS code, or is it a general but in the attachment and re-attachment of the hover events, as the DevExtreme team suggests?
,
Nov 15 2017
I'd suspect that 'hover not applying' and 'icons disappearing' are two separate issues - although both probably with the attach-reattach as a trigger. The 'icons disappearing' are probably caused by either the id-renaming or the removal of a view - or maybe a combination of both. There's one known issue in this area which pertains to duplicate ids and the "active" element (the one resources are currently pointing to) being removed. It's not trivial to verify that this is indeed the case that we're hitting though - at least I haven't been able to reliably reproduce this issue. I have seen duplicated appearing in some cases.
,
Nov 15 2017
So I think I managed to figure out one way to make the icons "disappear" (lose their gradients): Login and then logout repeatedly until you've managed to produce 5 inactive (toolbar) views, at which point the first/oldest will be destroyed - breaking all gradient references. This matches the know issue mentioned in my previous comment, and the good news is that I have fix for that (since a while back.) The :hover issue remains elusive though still. Given that the ".toolbar-button svg:hover path:last-child" selector seems to generally work(?) I guess this issue could have some relation to the 'stop' or 'stop-color'.
,
Nov 15 2017
At least from my side as a page developer, all IDs should be unique. I just checked the source code of my layout and there, every SVG element has a unique ID. Or do you mean something else?
,
Nov 15 2017
Ah, now I understand. We were posting at the same time ^^ I can also reliably reproduce the error after the navigation area refreshes exactly 5 times. After that, the error appears after every second refresh (one time, it works, the next time, it doesn't). Do you know, when your patch will be available? The other problem really seems to be a separate issue.
,
Nov 15 2017
It's a pretty large thing, so I'm not sure if now is a good time for landing it, so it maybe after the next branch. (M65)
,
Nov 15 2017
Ok. Any idea, why the second error happens?
,
Nov 15 2017
No real clue on the second issue yet I'm afraid.
,
Jan 22 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/c36508a349b4bff18c73f2e2e2b46805ad091598 commit c36508a349b4bff18c73f2e2e2b46805ad091598 Author: Fredrik Söderquist <fs@opera.com> Date: Mon Jan 22 19:01:26 2018 [CI] DOM-based SVG resource tracking (1/n) This starts the transition away from tracking SVG resources based on LayoutObjects. In the new (probably transitional) model, the resources are track via a Resource object (inner class) on SVGTreeScopeResources. These Resource objects are IdTargetObservers, meaning that id mutations no longer are tracked via hooks in SVGElement. The "pending resource handling" mechanism is also moved to the Resource objects in the form of a "pending clients" set. The old mechanism (i.e NeedsPendingResourceHandling() and BuildPendingResourcesIfNeeded()) are no longer needed and hence removed. Next step will be to eliminate all remaining tracking logic from LayoutSVGResourceContainer. Somewhat independently, a new entry point ResourceReferenceChanged is added to SVGResourcesCache, codifying the sequence that previously involved calls to ClientStyleChanged and MarkForLayoutAndParentResourceInvalidation. Bug: 454767 , 661598 , 769774, 784435 Cq-Include-Trybots: master.tryserver.blink:linux_trusty_blink_rel;master.tryserver.chromium.linux:linux_layout_tests_slimming_paint_v2 Change-Id: I268f2e2a2a5e2e01f077a6b0a5b6270f668a2a6f Reviewed-on: https://chromium-review.googlesource.com/689998 Reviewed-by: Stephen Chenney <schenney@chromium.org> Commit-Queue: Fredrik Söderquist <fs@opera.com> Cr-Commit-Position: refs/heads/master@{#530930} [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/paint/invalidation/svg/js-late-marker-and-object-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/paint/invalidation/svg/js-late-marker-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/paint/invalidation/svg/js-late-mask-and-object-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/paint/invalidation/svg/js-late-mask-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/svg/js-late-clipPath-and-object-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/svg/js-late-clipPath-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/svg/js-late-gradient-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/platform/mac/paint/invalidation/svg/js-late-pattern-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/platform/win/paint/invalidation/svg/js-late-clipPath-and-object-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/platform/win/paint/invalidation/svg/js-late-clipPath-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/platform/win/paint/invalidation/svg/js-late-gradient-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/platform/win/paint/invalidation/svg/js-late-pattern-creation-expected.txt [add] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/svg/custom/duplicate-ids-remove-first-expected.html [add] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/svg/custom/duplicate-ids-remove-first.html [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/virtual/spv175/paint/invalidation/svg/js-late-gradient-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/virtual/spv175/paint/invalidation/svg/js-late-marker-and-object-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/virtual/spv175/paint/invalidation/svg/js-late-marker-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/virtual/spv175/paint/invalidation/svg/js-late-mask-and-object-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/virtual/spv175/paint/invalidation/svg/js-late-mask-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/LayoutTests/virtual/spv175/paint/invalidation/svg/js-late-pattern-creation-expected.txt [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/dom/Element.cpp [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/dom/IdTargetObserver.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceContainer.cpp [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/layout/svg/LayoutSVGResourceContainer.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/layout/svg/SVGResources.cpp [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/layout/svg/SVGResources.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/layout/svg/SVGResourcesCache.cpp [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/layout/svg/SVGResourcesCache.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/svg/SVGClipPathElement.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/svg/SVGElement.cpp [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/svg/SVGElement.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/svg/SVGFilterElement.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/svg/SVGGradientElement.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/svg/SVGMarkerElement.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/svg/SVGMaskElement.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/svg/SVGPatternElement.h [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/svg/SVGTreeScopeResources.cpp [modify] https://crrev.com/c36508a349b4bff18c73f2e2e2b46805ad091598/third_party/WebKit/Source/core/svg/SVGTreeScopeResources.h |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by vamshi.k...@techmahindra.com
, Nov 14 2017Labels: Triaged-ET Needs-Milestone Needs-Feedback