Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

does not render properly in Firefox, IE #1788

Closed
dfreedm opened this issue Jun 19, 2015 · 11 comments
Closed

does not render properly in Firefox, IE #1788

dfreedm opened this issue Jun 19, 2015 · 11 comments
Assignees

Comments

@dfreedm
Copy link
Member

dfreedm commented Jun 19, 2015

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.

paper-drawer-panel-ff

IE's worse:

paper-drawer-panel-ie

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

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

@dfreedm
Copy link
Member Author

dfreedm commented Jun 19, 2015

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?

@dfreedm
Copy link
Member Author

dfreedm commented Jun 19, 2015

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.

@dfreedm
Copy link
Member Author

dfreedm commented Jun 19, 2015

@seahrh Are you on Windows? There's probably a path bug in vulcanize on Windows right now: https://github.com/Polymer/vulcanize/issues/202

@dfreedm
Copy link
Member Author

dfreedm commented Jun 19, 2015

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.

@dfreedm
Copy link
Member Author

dfreedm commented Jun 19, 2015

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.

@dfreedm
Copy link
Member Author

dfreedm commented Jun 19, 2015

From @blasten on June 18, 2015 20:14

ping @azakus

@dfreedm dfreedm assigned dfreedm and unassigned blasten Jun 19, 2015
@michaelpg
Copy link

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
Copy link

seahrh commented Jul 19, 2015

@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.

@FranzThomsen1089
Copy link

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

dfreedm referenced this issue in Polymer/polymer Aug 5, 2015
Handle cases when elements register before templates are bootstrapped

Fixes Polymer/vulcanize#209
@dfreedm
Copy link
Member Author

dfreedm commented Aug 5, 2015

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

@FranzThomsen1089
Copy link

thanks

@aomarks aomarks transferred this issue from Polymer/polymer-bundler Jan 3, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants