iron-iconset-svg icon indicating copy to clipboard operation
iron-iconset-svg copied to clipboard

Published 20 hours ago • verified publisher icon PolymerElements

Large post-registration imports can lead to incomplete icon maps

Open tiwijo opened this issue 7 years ago • 5 comments

Description

When importing a large HTML bundle, Chrome can parse it in pieces. If an iron-iconset-svg definition is broken across multiple pieces, then only the icons in the first piece (the one with the opening tag) are available in the icon map. Other icons will be blank.

Expected outcome

The icon map should be complete. Either wait until the closing tag or incrementally build the icon map.

Actual outcome

The icon map is incomplete, containing only the icons in the same piece of HTML that has the opening tag. Note this doesn't happen if you HTML import first, then register because HTML imports should block.

Live Demo

Steps to reproduce

  1. Register the iron-iconset-svg component.
  2. Import a large HTML bundle. Not sure the best way to get it to parse in pieces, but perhaps loading the main thread with work might help.
  3. Observe the icon map is incomplete. You can also look at the timeline in dev tools to confirm the HTML bundle has been parsed in pieces.

Browsers Affected

This was detected in Chrome. I haven't tried in other browsers.

  • [x] Chrome
  • [ ] Firefox
  • [ ] Safari 9
  • [ ] Safari 8
  • [ ] Safari 7
  • [ ] Edge
  • [ ] IE 11
  • [ ] IE 10

tiwijo avatar Apr 11 '17 22:04 tiwijo

I am also getting this issue. The referenced PR does fix it but I'm not sure it is the best fix.

UPDATE: Seems related to the use of async attribute on the HTML Imports.

stramel avatar Jan 23 '18 18:01 stramel

async is not required for this to break. It can happen due to chunking without async @bicknellr is something missing from my solution?

andrey-git avatar Feb 16 '18 19:02 andrey-git

I experienced the same problem and messed around to find solutions. Is it possible that replacing the async in https://github.com/PolymerElements/iron-iconset-svg/blob/master/iron-iconset-svg.html#L188 with Polymer.RenderStatus.afterNextRender(this, ...) would solve this issue? I wasn't able to reproduce the problem after.

If I'm right here this would maybe be a more elegant fix than working with the DOMContentLoaded event as done in the open pr?

trading-peter avatar May 12 '18 14:05 trading-peter

Note that I have encountered this problem with a small iconset only containing 4 simple svg icons (using Chrome 69) - so the problem is not limited to large imports it would seem. Calling getIconNames() in a iron-iconset-added event handler gives me an empty list in this case so the parsing doesn't seem to be done yet.

Tronil avatar Oct 05 '18 08:10 Tronil

We fixed this by extending the original class and patching the fix in: https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/ha-iconset-svg.js

balloob avatar Oct 05 '18 09:10 balloob