在以下HTML示例中，当镀铬窗口高度拖动在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>已经在Chromium项目中提出了一个错误：https：//bugs.chromium.org/p/chromium/issues/detail?id=935452
我认为这是一个角案？并需要一些时间，直到修复为止。有人知道解决方法吗？
- 我们需要旋转父元素（红色框），并且靠近窗口的左角或右角
- 更新：在我们的实际应用程序中，Red_box始终是一个新层（浏览器复合过程），因此我们需要CSS
will-change: transform;在简化示例中强制新层。该错误似乎与浏览器层连接。 - 更新：我们还需要5em左右的CSS高度，因为我们从左到右对Red_box进行了动画。仅当HTML元素重叠窗口大小时才发生错误。
删除 height表格 .red_box 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);
-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>