webf
webf copied to clipboard
Published
20 hours ago •
openwebf
openwebf
style not update
Affected version
0.12.0 +
No same issues found.
- [X] Yes, I search all issues but not found.
Steps to Reproduce
参考以下示例
Code example
<html style="font-size: 9.25926vw">
<head>
<meta charset="utf-8" />
<meta content="portrait" name="screen-orientation" />
<meta content="portrait" name="x5-orientation" />
<meta content="webkit" name="renderer" />
<meta content="max-age=180" http-equiv="Cache-control" />
<meta
name="viewport"
content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"
/>
<title>dom更新时，样式无法更新问题</title>
<meta name="keywords" content="请配置页面关键词" />
<meta name="description" content="请配置页面描述" />
</head>
<style>
body {
width: 100%;
height: 100vh;
margin: 0;
}
.pic-list {
align-items: center;
border-bottom: solid 1px #f2f2f2;
display: flex;
flex-shrink: 0;
overflow-x: auto;
padding: 24px 54px;
white-space: nowrap;
width: 100%;
}
.image-item {
flex-shrink: 0;
height: 80px;
background: black;
margin-right: 20px;
position: relative;
width: 80px;
}
.image-item:last-child {
margin-right: 0px;
}
.btn {
width: 100px;
height: auto;
border-radius: 10px;
padding: 10px;
border: 1px solid coral;
}
</style>
<body>
<div class="pic-list">
<div class="image-item"></div>
<div class="image-item"></div>
</div>
<button class="new-btn">新增一个</button>
<button class="delete-btn">减少一个</button>
<script>
const picList = document.querySelector('.pic-list');
const newBtn = document.querySelector('.new-btn');
const deleteBtn = document.querySelector('.delete-btn');
newBtn.addEventListener('click', () => {
const imageItem = document.createElement('div');
imageItem.classList.add('image-item');
picList.appendChild(imageItem);
});
deleteBtn.addEventListener('click', () => {
const imageItem = document.querySelector('.image-item:last-child');
picList.removeChild(imageItem);
});
</script>
</body>
</html>
Expected results
和H5表现一样
Actual results
表现异常
