gpt4 book ai didi

带有变换旋转(90 度)的 html div 元素在 chrome 中消失

转载 作者:行者123 更新时间:2023-11-28 00:20:44 25 4
gpt4 key购买 nike

在下面的 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>

已经在 chromium 元素中提交了一个错误:https://bugs.chromium.org/p/chromium/issues/detail?id=935452

我假设这是一个极端案例?并且需要一些时间才能解决这个问题。有人知道解决方法吗?

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

最佳答案

.red_box css 中删除 height。请使用以下代码:

        .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>

关于带有变换旋转(90 度)的 html div 元素在 chrome 中消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54880926/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com