我的 HTML/CSS/Js 代码如下：
let con = document.getElementById("container")
setTimeout(function(){
// while(con.hasChildNodes){
// con.removeChild(con.firstChild)
// }
con.style.display = "none"
},3 * 1000)#container{
width: 100%;
height: 1080px;
background: #00ff00
}
.item{
width: 100px;
height: 200px;
background: #ff00ff;
animation: move 2s linear infinite;
}
@keyframes move{
0%{
transform: translateX(100px)
}
100%{
transform: translateX(200px)
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>page not refresh</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="js.js"></script>
</body>
</html>在 Chrome 或 Firefox 中，UI 可以在 3 秒后隐藏。在 Cobalt 中，UI 无法在 3 秒后隐藏。
如果我们从 Cobalt 中的 css 文件中删除动画，UI 可以在 3 秒后成功隐藏。
当页面上有动画时如何隐藏UI？
Cobalt 只渲染必要的区域。如果没有要渲染的内容，则不会执行任何操作。在您的情况下，没有指定的背景颜色，因此隐藏项目后没有任何要更新的内容。设置背景颜色应该可以解决问题，因为这意味着在隐藏项目后有一些东西要渲染 - 这是"白色"颜色。
body {
background-color: white;
}