Question

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

当已修复的旋转元素放在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>

Answer 1

Adding translateZ(0) to the rotated elements forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly and keeps them painted on scroll down.

我在铬跟踪器上创建了一个关于此错误的问题：https://bugs.chromium.org/p/chromium/issues/detail?id=700333

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

1 个答案: