search

PolymerElements / iron-iconset-svg

Represents a source of icons expressed as a collection of inline SVGs
https://www.webcomponents.org/element/PolymerElements/iron-iconset-svg
37 stars 34 forks source link

Large post-registration imports can lead to incomplete icon maps #66

Open tiwijo opened 7 years ago

tiwijo commented 7 years ago

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.
    • [x] Chrome
    • [ ] Firefox
    • [ ] Safari 9
    • [ ] Safari 8
    • [ ] Safari 7
    • [ ] Edge
    • [ ] IE 11
    • [ ] IE 10
stramel commented 6 years ago

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.

andrey-git commented 6 years ago

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

trading-peter commented 6 years ago

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?

Tronil commented 5 years ago

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.

balloob commented 5 years ago

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