Question

在以下html示例中，当将chrome窗口高度拖动到1200px以上时，蓝色框消失。（简化示例）

 <html>    
    <head>
      <style type="text/css">
        .red_box {
          position: fixed;
          right: calc(-50vh + 1em);
          width: 100vh;
          top: calc(50vh - 1.2em);
          height: 4.9em;
          transform-origin: top;

          transform: rotate(-90deg);
    
          background-color: red;
          will-change: transform;    
        }    
        .blue_box {
          width: 60vh;
          background: blue;
          height: 2em;
    
        }
      </style>
    </head>    
    <body>    
      <div class="red_box">
        <div class="blue_box">
        </div>
      </div>    
    </body>    
    </html>

已经在Chrome项目https://bugs.chromium.org/p/chromium/issues/detail?id=935452

中提交了错误

我认为这是一个极端的情况？并且需要一些时间才能解决。有人知道解决方法吗？

我们需要旋转父元素（红色框），并使其靠近窗口的左或右角
更新：在我们的实际应用程序中，red_box始终是一个新层（浏览器复合过程），因此在简化示例中，我们需要css will-change: transform;来强制使用一个新层。该错误似乎与浏览器层有关。
更新：我们还需要一个5em左右的css高度，因为我们从左到右为red_box设置了动画。仅当html元素与窗口大小重叠时，才会发生该错误。

Answer 1

从height CSS中删除.red_box。请使用以下代码：

        .red_box {
          position: fixed;
          right: calc(-50vh + 1em);
          width: 100vh;
          top: calc(50vh - 1.2em);
          /*height: 4.9em;*/
          transform-origin: top;
          transform: rotate(-90deg);
          -webkit-transform: rotate(-90deg);
          -moz-transform: rotate(-90deg);       
          -ms-transform: rotate(-90deg);
          background-color: red;
          will-change: transform;    
        }    
        .blue_box {
          width: 60vh;
          background: blue;
          height: 2em;        
        }

 <html>    
    <head>
    </head>    
    <body>    
      <div class="red_box">
        <div class="blue_box"></div>
      </div>    
    </body>    
  </html>

带有divate rotation（90deg）的html div元素在chrome中消失

1 个答案: