SVG icon only shows after interaction
Reported by
gregor...@gmail.com,
Aug 22
|
||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0 Example URL: https://voice.mozilla.org/en/new Steps to reproduce the problem: 1. Open the URL 2. Missing speak icon 3. Hover over that section to make the icon appear What is the expected behavior? Speak icon should show up from the get go What went wrong? The speak icon doesn't show unless interacted with 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 (Official Build) (64-bit) (cohort: Stable) Channel: stable OS Version: 10.0 Flash Version:
,
Aug 22
The issue seems to be the transition on fill for the SVG path. The transition is never kicking in, it seems, until hover forces another transition (I suspect). Step 1 would be to reduce this, by pulling out the SVG icon and seeing if that alone has the issue.
,
Aug 23
I pulled out the icon in question, and the issue did not reproduce on the static content. Since the icon is built runtime (using React?), there possibly something in that process that end up triggering the issue.
,
Aug 23
Thanks for trying to reduce.
,
Aug 23
Snapshots of an inspector view of the content before and after interacting.
I notice that interacting with the rest of the page also generates new names for the paths and masks, but does not cause the content to draw.
Toggling the CSS ".hero-box .primary-button button path { {webkit-,}transition: fill .5s linear;}" in the inspector causes the icon to appear, and disappear. Even after the icon has appeared by interaction.
,
Aug 23
,
Aug 24
Thanks for digging. This made me realized I missed a few (fairly telling, now) details. With that I managed to reproduce in my reduction (further reduced TC attached), and could conclude that this is a dupe of issue 618142.
,
Aug 24
Thanks for tackling this so thoroughly, much appreciated! |
||||
►
Sign in to add a comment |
||||
Comment 1 by dtapu...@chromium.org
, Aug 22