Это определенно ошибка Chrome, они не вызывают пересчет позиции
Вы можете обойти эту проблему, убедившись, что позиция пересчитана, вы также можете использовать
right:0.000001px;
если вы делаете точки, что писать ширину в двух отдельных правилах.Но я думаю, что это хуже, чем решение ниже
document.getElementById('add').addEventListener("click",()=>{
document.getElementById('fixed').classList.add("border");
})
document.getElementById('delete').addEventListener("click",()=>{
document.getElementById('fixed').classList.remove("border");
})
.fixed{
position: fixed;
width: 400px;
height: 400px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: red;
}
.absolute{
position: absolute;
width: 100px;
height: 30px;
top: 30px;
right: 30px;
background: yellow;
}
.border{
border:8px solid green;
}
.fixed{
position: fixed;
width: 400px;
height: 400px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: red;
}
.absolute{
position: absolute;
width: 30px;
height: 30px;
top: 0px;
right: 0px;
background: yellow;
}
.border{
border:8px solid green;
}
.border .absolute{
left:calc(100% - 30px);
}
<html>
<head>
<title>TSET</title>
</head>
<body>
<div class="fixed" id="fixed">
<div class="absolute" ></div>
<button id="add">add</button>
<button id="delete">delete</button>
</div>
</body>
</html>