Google Chromeのスクロールで固定された回転要素が消えます

クロムを使用したポリマーアプリでスクロールすると、回転した要素とそのコンテンツが消える原因を見つけるのに問題が発生します。Google Chromeのスクロールで固定された回転要素が消えます

固定された回転要素が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>

出典

2017-03-09 danielx

それはバグですので、あなたは、ポリマーのサイト上での問題を開く必要があります。 – Supersharp

Google Chromeのスクロールで固定された回転要素が消えます

答えて

関連する問題