CSS transition animation causes residual border lines on the page - css

Question

I made a pop-up window and used transition animation in CSS.
When I open the pop-up window, there is no problem with the transition animation, but when the pop-up window is closed, there will be residual border lines on the page.
This happens in Google Chrome.
Please click here for details：
https://codepen.io/lianflower/pen/zYKRPJb
<button data-modal-target="#modal">Open Modal</button>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">Example Modal</div>
<button data-close-button class="closebutton">×</button>
</div>
<div class="modal-body">
A wiki (/ˈwɪki/ (About this soundlisten) WIK-ee) is a hypertext publication collaboratively edited and managed by its own audience directly using a web browser. A typical wiki contains multiple pages for the subjects or scope of the project and may be either open to the public or limited to use within an organization for maintaining its internal knowledge base
</div>
</div>
<div id="overlay"></div>
*，*::after, *::before {
box-sizing: border-box;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 500ms ease-in-out;
border: 1px solid black;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 800px;
max-width: 80%;
}
.modal.active {
transform: translate(-50%, -50%) scale(1);
}
.modal-header {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid black;
}
.modal-header .title {
font-size: 1.25rem;
font-weight: bold;
}
.modal-header .close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.modal-body {
padding: 10px 15px;
}
#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
var openModalButtons = document.querySelectorAll('[data-modal-target]');
var closeModalButtons = document.querySelectorAll('[data-close-button]');
var overlay = document.getElementById('overlay');
openModalButtons.forEach(button => {
button.addEventListener('click', () => {
var modal = document.querySelector(button.dataset.modalTarget);
openModal(modal)
})
});
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
var modal = button.closest('.modal');
closeModal(modal)
})
});
overlay.addEventListener('click', () => {
var modals = document.querySelectorAll('.modal.active');
modals.forEach(modal => {
closeModal(modal)
});
});
function openModal(modal) {
if (modal == null) return;
modal.classList.add('active');
overlay.classList.add('active')
}
function closeModal(modal) {
if (modal == null) return;
modal.classList.remove('active');
overlay.classList.remove('active')
}

Answer 1

You modal has a border, border: 1px solid black; That is causing this thing to happen. Put border on modal.active class instead and you are good to go.
Update: Set your borders only when the modal is active on any of the children components of modal in order to avoid these extra lines.
Codepen:https://codepen.io/emmeiWhite/pen/MWjQrJd
Full Code:
var openModalButtons = document.querySelectorAll('[data-modal-target]');
var closeModalButtons = document.querySelectorAll('[data-close-button]');
var overlay = document.getElementById('overlay');
openModalButtons.forEach(button => {
button.addEventListener('click', () => {
var modal = document.querySelector(button.dataset.modalTarget);
openModal(modal)
})
});
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
var modal = button.closest('.modal');
closeModal(modal)
})
});
overlay.addEventListener('click', () => {
var modals = document.querySelectorAll('.modal.active');
modals.forEach(modal => {
closeModal(modal)
});
});
function openModal(modal) {
if (modal == null) return;
modal.classList.add('active');
overlay.classList.add('active')
}
function closeModal(modal) {
if (modal == null) return;
modal.classList.remove('active');
overlay.classList.remove('active')
}
*，*::after, *::before {
box-sizing: border-box;
}
.modal { /* Removed border from is selector */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
transition: 500ms ease-in-out;
border-radius: 10px;
z-index: 10;
background-color: white;
width: 800px;
max-width: 80%;
}
.modal.active {
transform: translate(-50%, -50%) scale(1);
border: 1px solid black; /*--- Added border here ---*/
}
.modal-header {
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid black;
}
.modal-header .title {
font-size: 1.25rem;
font-weight: bold;
}
.modal-header .close-button {
cursor: pointer;
border: none;
outline: none;
background: none;
font-size: 1.25rem;
font-weight: bold;
}
.modal-body {
padding: 10px 15px;
}
.modal-body.active{ /* Add border on active class only */
border:1px solid blue;
}
#overlay {
position: fixed;
opacity: 0;
transition: 200ms ease-in-out;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .5);
pointer-events: none;
}
#overlay.active {
opacity: 1;
pointer-events: all;
}
<button data-modal-target="#modal">Open Modal</button>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">Example Modal</div>
<button data-close-button class="closebutton">×</button>
</div>
<div class="modal-body">
A wiki (/ˈwɪki/ (About this soundlisten) WIK-ee) is a hypertext publication collaboratively edited and managed by its own audience directly using a web browser. A typical wiki contains multiple pages for the subjects or scope of the project and may be either open to the public or limited to use within an organization for maintaining its internal knowledge base
</div>
</div>
<div id="overlay"></div>