search

PolymerElements / paper-drawer-panel

A Material Design two-section responsive panel
https://www.webcomponents.org/element/PolymerElements/paper-drawer-panel
25 stars 42 forks source link

Drawer breaks with Firefox + Angular 2 routes #128

Closed danieleds closed 8 years ago

danieleds commented 8 years ago

Take a basic Angular 2 app, and Firefox. If the drawer is shown as the result of a route navigation, it breaks. I the page is loaded directly at that url, it works.

Live example: http://plnkr.co/edit/VlzUhHwbAcIAaBLjTyKP?p=preview Try it in Firefox and Chrome.

Chrome 48:

Firefox 44:

danieleds commented 8 years ago

Same thing happens with Angular 2.0 beta 3: http://plnkr.co/edit/8FtzjikSZyyEB2OO8L1j?p=preview

danieleds commented 8 years ago

Workaround: Instead of importing webcomponents-lite.min.js, import webcomponents.min.js. Then, just below that import, set window.Polymer.dom = 'shadow'. Example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.20/webcomponents.min.js"></script>

<script>
    window.Polymer = window.Polymer || {};
    window.Polymer.dom = 'shadow';
</script>

This will enable the full shadow DOM.

Might be related to this: https://github.com/angular/angular/issues/5531 so I'm closing.