Search code examples
cssz-indexpolymer-2.x

Strange css bug in Polymer 2 with paper-menu-button

When my menu button expands downward, something with the z-index or opacity gets messed up. Notice how the menu options appear to have a transparent background.

enter image description here

However, when the menu expands upward, it looks great and can be used without problems.

enter image description here

My custom element imports some styles...

<link rel="import" href="../bower_components/paper-styles/color.html">
<link rel="import" href="../bower_components/paper-styles/default-theme.html">

I have tried to adjust the z-index and opacity with no success. 

        paper-listbox paper-item {
            z-index: 9;
            opacity: inherit;
        }

        paper-menu-button paper-icon-button {
            z-index: 2;
            opacity: unset;
        }

Here is the markup for the paper-menu-button...

    <iron-list items="[[collection]]" as="item">
        <template>
            <paper-item>[[item.title_name]]
                <paper-menu-button horizontal-align="right" dynamic-align="false" class="forceRight">
                    <paper-icon-button icon="menu" slot="dropdown-trigger" alt="menu"
                                       role="button"></paper-icon-button>
                    <paper-listbox slot="dropdown-content" role="listbox">
                        <paper-item role="option">songs</paper-item>
                        <paper-item role="option">settings</paper-item>
                        <paper-item role="option">details</paper-item>
                    </paper-listbox>
                </paper-menu-button>
            </paper-item>
        </template>
      </iron-list>

I cannot even begin to imagine why the menu options would look good expanding upward but look bad expanding downward. I tried to create a jsbin but failed. So I created a tiny project to replicate the css bug. You can clone the repo here ...

https://github.com/bwfrieds/css-is-hard

Update: I attempted to use IronOverlayBehavior but failed.

https://github.com/PolymerElements/paper-menu-button/issues/9

Solution

  • So this is caused by how stacking context works. In this particular example, each element in the <iron-list> has will-change and transform css properties setup, which create a new stacking context: this traps the paper-menu-button (and its internal iron-dropdown) within it.

    I'd suggest to set z-index on the <paper-item> while the menu is opened:

    <paper-menu-button dynamic-align="false" on-opened-changed="_setZindex">

//...

_setZindex(event) {
  // The <paper-menu-button>
  const menu = event.target;
  // The <paper-item>
  const item = menu.parentNode;
  item.style.zIndex = menu.opened ? 101 : null;
}