fixed rotated elements disappears on scroll in google chrome

Question

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>

You should open an issue on Polymer's site since it's bug. – Supersharp Mar 09 '17 at 10:32 — Supersharp, Mar 09 '17 at 10:32

score 0 · Accepted Answer · edited May 23 '17 at 12:00

0

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

edited May 23 '17 at 12:00

Community

1
1

answered Mar 10 '17 at 11:23

danielx

1,785
1
12
23

fixed rotated elements disappears on scroll in google chrome

1 Answers1