Polymer 2 中带有纸质菜单按钮的奇怪 css 错误

Question

当我的菜单按钮向下展开时，带有 z-index 或不透明度的内容会变得混乱。请注意菜单选项如何显示为具有透明背景。

不过，当菜单向上展开时，很好看，可以正常使用。

我的自定义元素导入了一些样式...

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

我尝试调整 z-index 和不透明度但没有成功。

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

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

这是纸质菜单按钮的标记...

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

我什至无法想象为什么菜单选项向上展开看起来不错，向下展开却很糟糕。我试图创建一个 jsbin 但失败了。所以我创建了一个小项目来复制 css 错误。您可以在此处克隆存储库 ...

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

更新：我尝试使用 IronOverlayBehavior 但失败了。

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

Answer 1

所以这是由 stacking context 的工作方式造成的。在此特定示例中，<iron-list> 中的每个元素都具有 will-change 和 transform css 属性设置，这会创建一个新的堆叠上下文：这会捕获 paper-menu-button (及其内部 iron-dropdown) 在其中。

我建议在菜单打开时在 <paper-item> 上设置 z-index:

<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;
}

Polymer 2 中带有纸质菜单按钮的奇怪 css 错误

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

css

z-index

polymer-2.x