Importing typography.html causes ie & edge to lose shadows and elevation

[chasb154]

Description

I've upgraded to Polymer 2.0, not hybrid. When using any element that imports typography.html from paper-styles, IE & Edge lose the shadows and elevations. Chrome and Firefox show not issues. I'm unable to test on Safari.

I started a project from scratch using polymer-cli and added a paper-card, paper-button, iron-icon and paper-input one at a time trying to find the problem. Paper-input caused the failure. I traced it to typography.

If I simply import typography.html in my shared-styles it causes the problem as well, so it isn't the paper-input element.

Expected outcome

Shadows and elevations should be unaffected.

Actual outcome

Shadows dissapear and all buttons and cards show only the text.

Live Demo

Steps to reproduce

1. Create a new Polymer 2.0 PRPL project from polymer-cli.
2. Add a paper-button or paper-card.
3. Import bower_components/paper-styles/typography.html in shared-styles or add paper-input to the page.

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [?] Safari 9
• [?] Safari 8
• [?] Safari 7
• [x] Edge
• [x] IE 11
• [?] IE 10

No bower_components/paper-styles/typography.html imported

With typography.html imported

[chasb154]

I did some more digging and it appears that it's the Roboto font from Google Fonts that's causing the issue.

If I comment out the following import link:

everything works. This link is in the roboto.html file which is imported in the typography.html file. Edge appears to have a problem with the Google Font Roboto.

[chasb154]

I tested a second site. It's not just the Robot font, it appears to be any Google font loaded with a link.

I tested further and it appears to be a timing/caching issue. If I comment out the Roboto font link in the roboto.html file and place it in the index.html file, everything works in Edge.

[rediche]

This issue happens to me too. However it's a lot of different styles breaking, possibly related to CSS variables.

It also happens with all Google Fonts. It works when putting the link-tag in the index.html.

Could this have something to do with polyfilled HTML imports having link-tags with rel="stylesheet" inside them?

[notwaldorf]

/cc @valdrinkoshi

[valdrinkoshi]

Can you share the list of the installed bower dependencies? You can check it with the command bower list | grep -v '│ ' (<-- bower doesn't have --depth=0 so this does the trick)

I noticed that polymer starter kit is still pointing to 2.0-preview branches for elements, and release candidates for both webcomponents and polymer. After manually updating the bower dependencies and reinstalling them, I couldn't reproduce this problem (tried in MSEdge and IE). These are my installed dependencies:

├─┬ app-layout#2.0.0
├─┬ app-route#2.0.0
├── iron-flex-layout#2.0.0
├─┬ iron-iconset-svg#2.0.0
├── iron-media-query#2.0.0
├─┬ iron-pages#2.0.0
├── iron-selector#2.0.0
├─┬ paper-button#2.0.0
├─┬ paper-icon-button#2.0.0
├── polymer#2.0.1
├─┬ web-component-tester#6.0.0
└── webcomponentsjs#1.0.1

Here's my updated bower.json (with paper-button 2.0 added to the dependencies):

{
  "name": "polymer-starter-kit",
  "authors": [
    "The Polymer Authors"
  ],
  "license": "https://polymer.github.io/LICENSE.txt",
  "dependencies": {
    "app-layout": "PolymerElements/app-layout#^2",
    "app-route": "PolymerElements/app-route#^2",
    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2",
    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2",
    "iron-media-query": "PolymerElements/iron-media-query#^2",
    "iron-pages": "PolymerElements/iron-pages#^2",
    "iron-selector": "PolymerElements/iron-selector#^2",
    "paper-icon-button": "PolymerElements/paper-icon-button#^2",
    "polymer": "Polymer/polymer#^2",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1",
    "paper-button": "PolymerElements/paper-button#^2"
  },
  "devDependencies": {
    "web-component-tester": "Polymer/web-component-tester#^6"
  },
  "private": true
}

[chasb154]

Here's my bower.json:

{ "name": "polymer-starter-kit", "authors": [ "The Polymer Authors" ], "license": "https://polymer.github.io/LICENSE.txt", "dependencies": { "app-layout": "PolymerElements/app-layout#^2", "app-route": "PolymerElements/app-route#^2", "iron-flex-layout": "PolymerElements/iron-flex-layout#^2", "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2", "iron-media-query": "PolymerElements/iron-media-query#^2", "iron-pages": "PolymerElements/iron-pages#^2", "iron-selector": "PolymerElements/iron-selector#^2", "paper-icon-button": "PolymerElements/paper-icon-button#^2", "polymer": "Polymer/polymer#^2", "webcomponentsjs": "webcomponents/webcomponentsjs#^1", "paper-button": "PolymerElements/paper-button#^2", "paper-card": "PolymerElements/paper-card#^2", "paper-input": "PolymerElements/paper-input#^2.0.0" }, "devDependencies": { "web-component-tester": "Polymer/web-component-tester#^6" }, "private": true }

The paper-input or paper-dialog elements cause the problem. You didn't bring in paper-input or paper-dialog.

You will see the shadows from paper-button or paper-card disappear. My project worked at the stage yours is as well. It wasn't until paper-input or paper-dialog was added that things started to go haywire.

[valdrinkoshi]

I didn't include paper-input or paper-dialog because you didn't mention these previously. I've added those dependencies but I can't reproduce the issue:

In this repository you can find my setup - https://github.com/valdrinkoshi/paper-styles-144

bower.json

{
  "name": "polymer-starter-kit",
  "authors": [
    "The Polymer Authors"
  ],
  "license": "https://polymer.github.io/LICENSE.txt",
  "dependencies": {
    "app-layout": "PolymerElements/app-layout#^2",
    "app-route": "PolymerElements/app-route#^2",
    "iron-flex-layout": "PolymerElements/iron-flex-layout#^2",
    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2",
    "iron-media-query": "PolymerElements/iron-media-query#^2",
    "iron-pages": "PolymerElements/iron-pages#^2",
    "iron-selector": "PolymerElements/iron-selector#^2",
    "paper-icon-button": "PolymerElements/paper-icon-button#^2",
    "polymer": "Polymer/polymer#^2",
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1",
    "paper-button": "PolymerElements/paper-button#^2",
    "paper-dialog": "PolymerElements/paper-dialog#^2",
    "paper-card": "PolymerElements/paper-card#^2",
    "paper-input": "PolymerElements/paper-input#^2.0.0"
  },
  "devDependencies": {
    "web-component-tester": "Polymer/web-component-tester#^6"
  },
  "private": true
}

installed dependencies (bower list | grep -v '│ ')

├─┬ app-layout#2.0.0
├─┬ app-route#2.0.0
├── iron-flex-layout#2.0.0
├─┬ iron-iconset-svg#2.0.0
├── iron-media-query#2.0.0
├─┬ iron-pages#2.0.0
├── iron-selector#2.0.0
├─┬ paper-button#2.0.0
├─┬ paper-card#2.0.0
├─┬ paper-dialog#2.0.0
├─┬ paper-icon-button#2.0.0
├─┬ paper-input#2.0.1
├── polymer#2.0.1
├─┬ web-component-tester#6.0.0
└── webcomponentsjs#1.0.1

src/view.html

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
       :host {
        display: block;
        padding: 10px;
      }
    </style>

    <div class="card">
      <div class="circle">1</div>
      <h1>View One</h1>

      <paper-card>
        <paper-button raised>clicky</paper-button>
        <paper-input label="input"></paper-input>
      </paper-card>
      <p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
      <p>Lorem ipsum dolor sit amet, per in nusquam nominavi periculis, sit elit oportere ea.Lorem ipsum dolor sit amet, per
        in nusquam nominavi periculis, sit elit oportere ea.Cu mei vide viris gloriatur, at populo eripuit sit.</p>
    </div>
  </template>

  <script>
    class MyView1 extends Polymer.Element {
      static get is() {
        return 'my-view1';
      }
    }

    window.customElements.define(MyView1.is, MyView1);
  </script>
</dom-module>

src/shared-styles.html

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/paper-styles/typography.html">

<!-- shared styles for all views -->
<dom-module id="shared-styles">
  <template>
    <style>
      .card {
        margin: 24px;
        padding: 16px;
        color: #757575;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
      }

      .circle {
        display: inline-block;
        width: 64px;
        height: 64px;
        text-align: center;
        color: #555;
        border-radius: 50%;
        background: #ddd;
        font-size: 30px;
        line-height: 64px;
      }

      h1 {
        margin: 16px 0;
        color: #212121;
        font-size: 22px;
      }
    </style>
  </template>
</dom-module>

[chasb154]

I deleted the bower_components folder and reinstalled. Updates somewhere seem to have fixed the problem. Not sure what was updated to fix it.