Search code examples
htmlcssgoogle-chromepolymerweb-component

fixed rotated elements disappears on scroll in google chrome

I'm having some problems finding the cause where rotated elements and their content disappears when scrolling down in my polymer app with chrome.

The problem happens when a rotated element that is fixed is placed within a app-header-layout element and there is a paper-input element present.

The problem still persists in shadow DOM rendering.

This is the smallest reproducible snippet that I've managed to produce. 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>
Solution

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

    I have created a issue on the chromium tracker regarding this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=700333