does not render properly in Firefox, IE

[azakus]

From @seahrh on June 15, 2015 12:29

The example code in the docs does not render properly in FF38 and IE11.

<paper-drawer-panel>
  <paper-header-panel drawer>
    <paper-toolbar>
      <div>Application</div>
    </paper-toolbar>
    <div> Drawer content... </div>
  </paper-header-panel>
  <paper-header-panel main>
    <paper-toolbar>
      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
      <div>Title</div>
    </paper-toolbar>
    <div> Main content... </div>
  </paper-header-panel>
</paper-drawer-panel>

In FF, drawer seems to be truncated. paper-drawer-toggle doesn't work.

IE's worse:

Changing to the full webcomponents.min.js polyfill didn't help.

Copied from original issue: PolymerElements/paper-drawer-panel#66

[azakus]

From @blasten on June 17, 2015 0:24

@seahrh I couldn't replicate the issue.

If you take that markup along with the imports:

<link rel="import" href="../../paper-header-panel/paper-header-panel.html">
<link rel="import" href="../../paper-toolbar/paper-toolbar.html">

and you put it in demo/demo.html, you should see it working. If you still have issues, can you provide a link that replicates the issue?

[azakus]

From @seahrh on June 17, 2015 4:21

OK I took the example code and put it in demo.html, it works.

However, after vulcanizing the same file, I get the errors shown in the OP.

My vulcanize task:

gulp.task('vulcanize', function() {

    var DEST_DIR, VULCANIZED_EXT; 
    DEST_DIR = bases.dist + 'WEB-INF/pages';
    VULCANIZED_EXT = '.vul.html';

    return gulp.src(['*.html', '!*' + VULCANIZED_EXT], {
        cwd : DEST_DIR
    }).pipe($.vulcanize({
        inlineScripts : false,
        inlineCss : false,
        stripComments : true
    })).on('error', error).pipe($.rename({
        extname : VULCANIZED_EXT
    })).pipe(gulp.dest(DEST_DIR));

});

Inline scripts or not, I see the same errors.

On gulp-vulcanize@6.0.1, vulcanize@1.9.1

My work can't be deployed to production if paper-drawer-panel only works un-vulcanized.

[azakus]

@seahrh Are you on Windows? There's probably a path bug in vulcanize on Windows right now: #202

[azakus]

From @seahrh on June 18, 2015 9:6

Yes I'm using Win7. Let me try out the fix for Polymer/vulcanize#202 and report back.

[azakus]

From @seahrh on June 18, 2015 10:52

Updated to vulcanize 1.9.3 and not using abspath. Same problem persists.
I'm using other PolymerElements such as paper-fab and paper-input and they show up fine on the vulcanized page.

[azakus]

From @blasten on June 18, 2015 20:14

ping @azakus

[michaelpg]

I'm seeing the exact same issue.

Adding --inline-css to the vulcanize command fixes the layout.

In the "Style Editor" in FF, the version generated by --inline-css has two extra inline stylesheets (the first two listed, actually) which clearly seems to be the source of the problem:
http://pastebin.com/cVX2n1Cp
http://pastebin.com/aNRxmKs4

Also in the Style Editor, manually importing paper-drawer-panel.css fixes the layout in the broken vulcanized file.

[seahrh]

@michaelpg, thanks for the inline-css tip. Yes the vulcanzied page now renders properly in FF39, but the same problem still persists in IE11.

On gulp-vulcanize 6.0.1, vulcanize 1.10.1.

[JustinCase1089]

Any news on this issue? ... I have boiled my problem down to precisely this issue in IE11
I actually asked about it here as well
http://stackoverflow.com/questions/31651379/in-polymer-1-0-vulcanize-ie-does-not-work-for-paper-drawer-panel

[azakus]

This is actually a Polymer / Template element polyfill bug, where templates are processed before they are upgraded by the polyfill. I've made a PR in Polymer to work around this: Polymer/polymer#2201

[JustinCase1089]

thanks