Box-shadow not showing up?

Question

I am using google polymer web components to style something, however the top shadow of the top toolbar is not showing up.

The bottom shadow works just fine. Also, even though I set the z-index of the top toolbar and the bottom toolbar higher than the drawer when it opens, I still see the drawer open over the top but it works in the bottom.

Drawer Closed:

Drawer Opened:

Here is my code:

<dom-module id="bollu-app">
  <template>
    <style>
      :host {

        display: block;
      }

      app-drawer-layout:not([narrow]) [drawer-toggle] {
        display: none;


      }

      app-header {
        color: #FBFFFF;



      }

      app-header paper-icon-button {
        --paper-icon-button-ink-color: #FBFAFC;
      }

      app-toolbar.top {

        padding: 0 16px;
        top: 0;
        background-color: #121D23;
        position: fixed;
        width: 100%;
        height: 50px;
        z-index: 3;
        box-shadow: inset 0px 5px 2px -3px rgba(0, 0, 0, 0.2);

      }

      app-toolbar.bottom {
        background-color: #121D23;
        bottom: 0;
        position: fixed;
        width: 100%;
        height: 50px;
        z-index: 3;
        box-shadow: inset 0px 5px 2px -3px rgba(0, 0, 0, 0.2);
      }

      app-drawer {
        --app-drawer-content-container: {
          background-color: #FBFAFC;
          z-index: 1;


        }

      }

      .page {
        background-color: #090A11;
        width: 100vh;
        height:100vh;
        z-index: -1;
      }

      .drawer-list {
        margin: 0 20px;
      }

      .drawer-list a {
        display: block;
        padding: 0 16px;
        font-family: "Lucida Console", Monaco, monospace;
        font-size: 20px;
        text-decoration: none;
        text-shadow: 2px 2px;
        text-align: center;
        color: #0B1016;
        background-color: #FBFAFC;
        line-height: 110px;
      }

      .drawer-list a.iron-selected {
        color: #0B1016;
        font-weight: bolder;
      }


    </style>

    <app-location
        route="{{route}}"
        url-space-regex="^[[rootPath]]">
    </app-location>

    <app-route
        route="{{route}}"
        pattern="[[rootPath]]:page"
        data="{{routeData}}"
        tail="{{subroute}}">
    </app-route>

    <app-drawer-layout fullbleed narrow="{{narrow}}">
      <!-- Drawer content -->
      <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
        <app-toolbar class="top"></app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="confessions-page" href="[[rootPath]]confessions-page">Confessions</a>
          <a name="gossip-page" href="[[rootPath]]gossip-page">Gossip</a>
          <a name="discover-page" href="[[rootPath]]discover-page">Discover</a>
          <a name="insights-page" href="[[rootPath]]insights-page">Insights</a>
          <a name="settings-page" href="[[rootPath]]settings-page">Settings</a>
        </iron-selector>
      </app-drawer>

      <!-- Main content -->
      <app-header-layout has-scrolling-region>

        <app-header slot="header" condenses reveals effects="waterfall">
          <app-toolbar class="top">
            <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
            <div main-title>B</div>
          </app-toolbar>
        </app-header>


        <iron-pages
            selected="[[page]]"
            attr-for-selected="name"
            fallback-selection="view404"
            role="main">
          <confessions-page name="confessions-page"></confessions-page>
          <gossip-page name="gossip-page"></gossip-page>
          <discover-page name="discover-page"></discover-page>
          <insights-page name="insights-page"></insights-page>
          <settings-page name="settings-page"></settings-page>
          <my-view404 name="my-view404"></my-view404>
        </iron-pages>
      </app-header-layout>
    </app-drawer-layout>

    <app-toolbar class="bottom"></app-toolbar>

      <div class="page"></div>

  </template>

  <script>
    // Gesture events like tap and track generated from touch will not be
    // preventable, allowing for better scrolling performance.
    Polymer.setPassiveTouchGestures(true);

    class BolluApp extends Polymer.Element {
      static get is() { return 'bollu-app'; }

      static get properties() {
        return {
          page: {
            type: String,
            reflectToAttribute: true,
            observer: '_pageChanged',
          },
          routeData: Object,
          subroute: Object,
          // This shouldn't be neccessary, but the Analyzer isn't picking up
          // Polymer.Element#rootPath
          rootPath: String,
        };
      }

      static get observers() {
        return [
          '_routePageChanged(routeData.page)',
        ];
      }

      _routePageChanged(page) {
        // If no page was found in the route data, page will be an empty string.
        // Default to 'discoverPage' in that case.
        this.page = page || 'discover-page';

        // Close a non-persistent drawer when the page & route are changed.
        if (!this.$.drawer.persistent) {
          this.$.drawer.close();
        }
      }

      _pageChanged(page) {
        // Load page import on demand. Show 404 page if fails
        const resolvedPageUrl = this.resolveUrl(page + '.html');
        Polymer.importHref(
            resolvedPageUrl,
            null,
            this._showPage404.bind(this),
            true);
      }

      _showPage404() {
        this.page = 'my-view404';
      }
    }

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

Thanks.

Answer 1

我们遇到了类似的错误，这是Google Chrome中的错误，Chrome 69的更新为我们解决了该错误。