CSS transitions with delay on SVG elements
Reported by
jan.boes...@incors.com,
Aug 29
|
|||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36 Example URL: Steps to reproduce the problem: Open the attached file or go to https://codepen.io/anon/pen/dqpZeZ Click on the "go green" button below the red squares. The color transition on the div (upper square) starts immediately, while the color transition on the second square (svg) starts with a delay of 4 seconds. What is the expected behavior? The expected behavior would be that the transitions on both squares start immediately. What went wrong? The transition in the SVG seems to be chained somehow. The delay is the same as the transition duration, which indicates that a transition occurs first in the background and after that is finished, the visible transition starts. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 68.0.3440.106 Channel: stable OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version:
,
Aug 29
Looks more like an animation (transition) issue than an SVG one. Removing the transition on the 'rect' (keeping it on the 'g' only, i.e 'g, rect, div' -> 'g, div'), the color transitions as expected. Perhaps the transition on the 'rect' is restarted every time the style for the 'g' is recomputed?
,
Aug 29
I am not sure if it really has to do with the rect, because if add an extra group as in the following structure the issue still occurs.
<g>
<g fill="currentColor">
<rect width="100" height="100" >
</g>
</g>
,
Aug 29
Sorry, that was incomplete. The issue then disappears if you then remove the rect from the CSS selector like this:
g, div {
transition: color 4000ms;
}
,
Aug 29
May be related to or a duplicate of Issue 810126
,
Aug 29
,
Aug 29
That's an interesting observation, but since the issue still disappear when the 'rect' no longer has a transition, it seems to indicate that the rect is indeed "special"?
,
Aug 29
|
|||
►
Sign in to add a comment |
|||
Comment 1 by dtapu...@chromium.org
, Aug 29