Polymer 入门套件 app-drawer & app-header 显示在全屏视频上方

Question

我正在使用 Polymer Starter Kit，并且我在我的一个页面中包含了一些带有 <google-youtube> 元素的 YouTube 视频。当我点击以全屏模式观看视频时，侧面 app-drawer 和顶部 app-header 持续存在并覆盖视频。如何隐藏抽屉和 header?

app-drawer 用法：

<app-drawer paper-drawer-toggle class="appDrawer" id="menu" on-tap="closeMenu">
  <div class="appDrawerBackground">
    <app-toolbar class="appDrawer">Menu</app-toolbar>
    <hr class="menuLine">
    <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
      <a class="homeMargin" name="home" href="/home">Biography</a>
      <hr>
      <a name="view1" href="/acting">Acting</a>
      <hr>
      <a name="view2" href="/produce">Directing / Producing</a>
      <hr>
      <a name="view3" href="/contact">Contact</a>
    </iron-selector>
  </div>
</app-drawer>

app-header 用法：

<app-header condenses reveals effects="waterfall">
  <app-toolbar>
    <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
    <div title>
      <img class="headerImg" src="/images/toolbar-logo.png">
    </div>
  </app-toolbar>
</app-header>

截图：

Answer 1

Polymer Starter Kit 的根布局元素 app-drawer-layout，包含 app-drawer 和 app-header，两者都有自己的 stacking context's with a positive z-index -- 一个更高的比 <iron-pages> child，它可能包含 <google-youtube> 元素。由于 <google-youtube> 处于比页眉和抽屉更低的堆栈上下文中，因此视频的 z-index 无法单独将其移动到前面。

为了补偿，您可以使用以下 CSS 将 app-header 和 app-drawer 移动到负 z-index，允许 <google-youtube> 的内部全屏时视频堆叠在它们上方。 （已在 macOS Sierra 上的 Chrome 56、Firefox 50 和 Safari 10 上进行测试）

app-drawer-layout:-webkit-full-screen-ancestor app-header,
app-drawer-layout:-webkit-full-screen-ancestor app-drawer {
  z-index: -1 !important;
}

请注意，:-webkit-full-screen-ancestor pseudo-class 应用于全屏元素（即 <google-youtube> 的视频元素）的所有祖先，并在退出全屏时自动删除。这个 WebKit pseudo-class 目前没有我能找到的文档。请注意，Gecko 等效项 (:-moz-full-screen-ancestor) 已从 Firefox 50 中删除，尽管 :-webkit-full-screen-ancestor 仍然可以在那里工作。

Polymer 入门套件 app-drawer & app-header 显示在全屏视频上方

Polymer Starter Kit app-drawer & app-header showing on top of fullscreen video

javascript

youtube

polymer

polymer-1.0

polymer-starter-kit