固定的旋转元素在Google Chrome中滚动时消失

时间:2017-03-09 09:58:01

标签: html css google-chrome polymer web-component

我在使用镀铬的聚合物应用程序向下滚动时发现旋转元素及其内容消失的原因时遇到了一些问题。

当已修复的旋转元素放在app-header-layout元素中并且存在paper-input元素时,会发生此问题。

问题仍然存在于阴影DOM渲染中。

这是我设法制作的最小的可重复片段。 https://jsbin.com/celarureyo/1/edit?html,output

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <base href="https://polygit.org/components/">

  <script>
    window.Polymer = {
      dom: 'shady'
    };
  </script>

  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="app-layout/app-header-layout/app-header-layout.html">
  <link rel="import" href="paper-input/paper-input.html">

  <style>
    html,
    body {
      padding: 0px;
      margin: 0px;
      height: 100vh;
      width: 100vw;
      font-family: Noto, Roboto;
      color: white;
      background-color: #eee;
    }

    paper-input {
      padding: 24px;
    }

    #content {
      height: 200vh;
    }

    #rotated-fixed-box {
      position: fixed;
      background-color: tomato;
      width: 64px;
      height: 64px;
      display: flex;
      justify-content: center;
      align-items: center;
      bottom: 32px;
      left: 32px;
      transform: rotate(45deg);
    }

    #regular-fixed-box {
      position: fixed;
      background-color: #0097B2;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 64px;
      height: 64px;
      bottom: 32px;
      left: 128px;
    }

    #rotated-inner-box {
      background-color: tomato;
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: rotate(45deg);
    }
  </style>

  <body>

    <app-header-layout id="header-layout" has-scrolling-region>

      <div id="content">
        <paper-input label="This is weird"></paper-input>

        <div id="rotated-fixed-box">text</div>

        <div id="regular-fixed-box">
          <div id="rotated-inner-box">text</div>
        </div>

      </div>
    </app-header-layout>

  </body>

</html>