固定的旋轉元素在谷歌瀏覽器中滾動時消失

我遇到一些問題，在使用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

固定的旋轉元素在谷歌瀏覽器中滾動時消失

回答

相關問題