Rendering issues in ember-bootstrap tabs
Closed this issue · 2 comments
When the map is inside an ember-bootstrap tab the container displays correctly but the tiles do not. Once the window is resized a bit the tiles correctly draw. Outside the tab, everything works correctly. Is there any way to handle this and force the map to get the correct dimensions for the tiles to (re)draw?
https://ember-twiddle.com/6a1c89edf6af50b3d1ceb13ecaf800a9?openFiles=templates.application%5C.hbs%2C
@mattcooper-hdr please read this SO answer:
https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493
Unfortunately, ember-bootstrap doesn't fire any action when the tab animation finishes animating. Leaflet can't calculate its size initially, because the tab is hidden.
Please see this twiddle I made as a workaround:
https://ember-twiddle.com/65e696c788b9a0b2433e110e6d32873f?openFiles=controllers.application%5C.js%2C
Alternatively, you could try disabling bootstrap tabs animations entirely.
Waiting for the tab animation (here: full visibility) can easily be done by leveraging the IntersectionObserver API which also enables better component encapsulation and reduces repaint redundancy in this case:
https://ember-twiddle.com/c85bde4ee8a2c4bec5e8036fcee95ba9
https://gist.github.com/IBue/c85bde4ee8a2c4bec5e8036fcee95ba9